How do I get the element being edited?

Question

I'm developing a webapp, and I have a problem with the JavaScript.

The following is a simplified version of the HTML causing the problem. I have some nested contenteditable divs (I replaced the real content with placeholder text):

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

I want to get the element that's selected (being edited by the user) via JavaScript, but so far I haven't found a way to do it (successfully).

What I have tried and why it doesn't work:

I have tried using document.activeElement, which is supposed to return whichever element is in focus. Normally this works, but it doesn't produce the desired result when working with nested contenteditable elements. Instead of returning the element that's being edited by the user, it returns the uppermost contenteditable ancestor.

For instance, if div2 is selected/being edited, document.activeElement returns div1. If div3 was selected/being edited, document.activeElement also returns div1.

So I guess document.activeElement is not the right way to go about this.

How do I get the most specific element that's being edited, not its uppermost contenteditable ancestor?

This question is not much of a "why isn't this code working" question. It's more of asking **how to do something,** after my first attempt failed. — clickbait, Aug 23 '16 at 23:00
The Really Best Way is making a `MutationObserver`. It's not very easy though — Dimava, Sep 29 '16 at 20:18
@Dimava Mutation observer wouldn't pick up pure interaction events though. Only mutations. You could provide an answer as an example, or if you want, I could. :) — TylerY86, Sep 30 '16 at 01:29
Why is this question downvoted? It is incredibly difficult to get the focused element on nested `contenteditable`'s. — adelriosantiago, Dec 07 '19 at 22:18

score 12 · Accepted Answer · edited May 23 '17 at 12:26

I did it by inserting a dummy element at the caret position and finding it's direct parent.

function getActiveDiv() {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var node = document.createElement('span');
    range.insertNode(node);
    range = range.cloneRange();
    range.selectNodeContents(node);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    var activeDiv = node.parentNode;
    node.parentNode.removeChild(node);
    return activeDiv;
}

I did an example on fiddle: https://jsfiddle.net/shhe05cj/4/

I run it on every keypress event that's bind to the relevant divs.

I based it on another thread that did something similar:Set caret position right after the inserted element in a contentEditable div

Works perfectly for me! – ControlAltDel Jun 29 '18 at 20:36 — ControlAltDel, Jun 29 '18 at 20:36

score 3 · Answer 2 · answered Jun 27 '15 at 20:49

3

Seems to work fine for me in this fiddle: http://jsfiddle.net/dgrundel/huL4sjem/

I'm using this code to check:

<div contenteditable="true" class="edit">
    This is editable.
</div>

<script>
    $('.edit').on('click', function(){
        console.log(document.activeElement);
    });
</script>

When I click into the editable element, console gets a copy of the div logged to it.

answered Jun 27 '15 at 20:49

dgrundel

568
3
7

Does it have to be like that for it to work? My div is contenteditable inherit, and my parent div is contenteditable. – clickbait Jun 27 '15 at 20:56
2

Yes. You are editing the entire `contenteditable` parent element, not just the child, so it will be what gets the focus. – dgrundel Jun 28 '15 at 12:41
3

Then the answer does not solve my problem. How do I get the most specific element in focus/being edited? – clickbait Sep 03 '16 at 16:45

TylerY86 · Answer 3 · 2016-09-30T01:31:18.863

$('#edit').on('click', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

Here you go. Hit "Run snippet." Have fun.

The example below shows the behavior using the input event. This would mimic the behavior of a mutation observer.

$('#edit').on('input', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

The example below shows the behavior using the keydown and keyup events. This would catch non-modifying keypresses like arrows and modifier keys.

$('#edit').on('keydown keyup', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

@Dimava Added examples to show the difference between the `input` and `keydown` and `keyup` ... I skipped `keypress` because that would be redundant, but you get the idea. :) — TylerY86, Sep 30 '16 at 01:28
@narawagames You marked this as an answer, then unmarked it? Why? — TylerY86, Sep 30 '16 at 03:22

score 0 · Answer 4 · answered Oct 04 '16 at 14:50

0

This does the job for me:

   $(document).click(function(event) {
            console.log(event.target);
        });

answered Oct 04 '16 at 14:50

Petko Kostov

367
1
9

3

Nope, he wanted the element that being edited, not the one that was clicked. – fistuks Oct 04 '16 at 18:17

How do I get the element being edited?

4 Answers4

Linked

Related