How to detect when a child-element of a contenteditable DIV is edited via keyboard?
Given this HTML code:
<div contenteditable>
....
<span> child-element </span>
....
</div>
When the user clicks on the SPAN element (in order to place the caret inside it), and then presses a character key on the keyboard (in order to edit the text-content of the SPAN element), a keydown
, keypress
, and keyup
event will be fired.
However, the target
property of those corresponding event objects is not the SPAN element, but the DIV element itself.
Live demo: (Also on jsFiddle)
$('div').keydown(function(e) {
alert( e.target.nodeName );
});
div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }
<div contenteditable>
BEFORE
<span>SPAN</span>
AFTER
</div>
<p>
Click on the yellow SPAN element (to place the caret inside it), and then press a character key (开发者_如何学编程to change the text-content of the SPAN element). The alert-box shows that the event-target is the DIV element, not the SPAN element...
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
How can I determine whether or not the key-event occurred inside a SPAN element?
This can be done using the selection APIs:
$('div').keydown(function(e) {
if (document.selection) {
alert(document.selection.createRange().parentElement().tagName); // IE
} else {
// everyone else
alert(window.getSelection().anchorNode.parentNode.tagName);
}
});
Note: The above example is simplistic. See the SO post linked below for a complete solution to the selection problem.
Demo (also on jsFiddle):
$('div').keydown(function(e) {
if (document.selection)
alert(document.selection.createRange().parentElement().tagName); // IE
else
alert(window.getSelection().anchorNode.parentNode.tagName); // everyone else
});
div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }
<div contenteditable>
BEFORE
<span>SPAN</span>
AFTER
</div>
<p>
Click on the yellow SPAN element (to place the caret inside it), and then press a character key (to change the text-content of the SPAN element). The alert-box shows that the event-target is the DIV element, not the SPAN element...
</p>
<div id="stuff"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
References:
- https://developer.mozilla.org/en/DOM/Selection/anchorNode
- How can I get the DOM element which contains the current selection?
Making the whole div
editable means that <span>
tag is nothing but text content. If you just want the span
to be editable, set contentEditable
on the span itself.
精彩评论