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

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

<div contenteditable>
    ....
    <span> child-element </span>
    ....
</div>

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

Однако свойство соответствующих объектов событий не является элементом SPAN, но div { border : 2px solid red ; padding : 10px ; margin : 10px ; } span { background-color : yellow ; } .$('div').keydown(function(e) { alert( e.target.nodeName ); });

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

<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>
$('div').keydown(function(e) {
    if (document.selection) {
        alert(document.selection.createRange().parentElement().tagName); // IE
    } else {
        // everyone else
        alert(window.getSelection().anchorNode.parentNode.tagName); 
    }
});
$('div').keydown(function(e) {
    if (document.selection)
        alert(document.selection.createRange().parentElement().tagName); // IE
    else
        alert(window.getSelection().anchorNode.parentNode.tagName); // everyone else
});

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

javascript,html,contenteditable,

11

Ответов: 2

12 принят

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

div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }

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

Демо (также на jsFiddle ):

<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>
div
<span>

Рекомендации:

  • https://developer.mozilla.org/en/DOM/Selection/anchorNode
  • Как я могу получить элемент DOM, который содержит текущий выбор?
0

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

JavaScript, HTML, contenteditable,
Похожие вопросы
Яндекс.Метрика