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?
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?
- What do you exactly mean by getting focus? – Watte Commented Jun 27, 2015 at 20:45
- 1 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 Commented Aug 23, 2016 at 23:00
-
1
The Really Best Way is making a
MutationObserver. It's not very easy though – Dimava Commented Sep 29, 2016 at 20:18 - 1 @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 Commented Sep 30, 2016 at 1:29
-
1
Why is this question downvoted? It is incredibly difficult to get the focused element on nested
contenteditable's. – adelriosantiago Commented Dec 7, 2019 at 22:18
4 Answers
Reset to default 12 +50I 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/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
Seems to work fine for me in this fiddle: http://jsfiddle/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.
$('#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./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./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./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/>This does the job for me:
$(document).click(function(event) {
console.log(event.target);
});