Как определить, когда дочерний элемент контентного DIV редактируется с клавиатуры?

Учитывая этот HTML-код:

.... child-element ....

Когда пользователь нажимает на элемент SPAN (чтобы поместить курсор внутри него), а затем нажимает на клавиатуре клавишу символа (чтобы отредактировать текстовое содержимое элемента SPAN), keydown , keypress и keyup событие будет запущено.

Однако target свойство этих соответствующих объектов событий не является элементом SPAN, а сам элемент DIV.

Живая демонстрация: (Также на jsFiddle )

 $('div').keydown(function(e) { alert( e.target.nodeName ); }); 
 div { border:2px solid red; padding:10px; margin:10px; } span { background-color:yellow; } 
 
BEFORE SPAN AFTER

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...

Как определить, произошло ли ключевое событие внутри элемента SPAN?

Это можно сделать с помощью API выбора:

 $('div').keydown(function(e) { if (document.selection) { alert(document.selection.createRange().parentElement().tagName); // IE } else { // everyone else alert(window.getSelection().anchorNode.parentNode.tagName); } }); 

Примечание . Вышеприведенный пример упрощен. См. Ссылку SO, приведенную ниже, для полного решения проблемы выбора.

Демо (также на 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; } 
 
BEFORE SPAN AFTER

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...

Создание всего редактируемого div означает, что – это не что иное, как текстовый контент. Если вы хотите, чтобы span был доступен для редактирования, установите contentEditable в самом диапазоне.