cannot get the content of active div

Question

<div class="wrap3">
lorem lorem lorem
<div class="inside3 ed" contentEditable>ipsum ipsum ipsum</div>
</div>

<div id="btnsave">Save</div>

js

$("#btnsave").click(function(){
    var a = document.activeElement.innerText;
    console.log(a);
});

Click inside ed it becomes active - (blue border arround)

Click on btnsave does not give the content of ed but the content of entire document.

`$('.ed').text()` for text only or `$('.ed').html()` for text and other html object — guradio, Feb 19 '16 at 07:34
@guradio, thanks, but I need content of active div. Next click will be on another div — qadenza, Feb 19 '16 at 07:36
@RinoRaj, your updated answer doesn't work. Console is empty. Please check your solution before posting. — qadenza, Feb 19 '16 at 07:57

Rino Raj · Accepted Answer · 2016-02-19T07:58:51.887

2

$("#btnsave").click(function(){
    var a = $('.ed:focus').text();
});

I think this will do.

Another solution:

$("#btnsave").click(function(){
     $('.lastEdited').text();
     alert($('.lastEdited').text())
});
$("div[contentEditable]").click(function(){
    $("div[contentEditable]").removeClass('lastEdited');
    $(this).addClass('lastEdited');
});

DEMO

edited Feb 19 '16 at 07:58

answered Feb 19 '16 at 07:33

Rino Raj

6,264
2
27
42

Rino, thanks, but I need content of active div. Next click will be on another div.There are many `ed` divs in document. – qadenza Feb 19 '16 at 07:35
No, console is empty with `var a = $('.ed:focus').text();` – qadenza Feb 19 '16 at 07:43
why you cant use html() instead of text() – safin chacko Feb 19 '16 at 07:44
@safinchacko html() will return the whole content. Consider a sitution like if the OP has some more elements in that div. Then html() wont be nice :) – Rino Raj Feb 19 '16 at 07:46

score 1 · Answer 2 · edited May 23 '17 at 11:50

I was able to get it to work correctly with a change of the save element to a button: https://jsfiddle.net/eac5L0aa/1/

<div class="wrap3">
lorem lorem lorem
<div class="inside3 ed" contentEditable>ipsum ipsum ipsum</div>

</div>

<button id="btnsave">Save</button>

$("#btnsave").click(function(){
    var a = getSelectionStart();
    console.log(a);
});
function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   console.log(node);
   return (node.nodeType == 3 ? node.parentNode : node);
}

Credit to this answer

cannot get the content of active div

2 Answers2