document.activeElement не может получить целевой элемент - PullRequest
Новая
       42

document.activeElement не может получить целевой элемент

1 голос
/ 12 апреля 2020 

editor.onmouseup = editclick;
editor.onkeydown=editinput;
function editclick(e) {
  info.innerHTML += '<br>' + document.activeElement.textContent
}
function editinput(e) {
  info.innerHTML += '<br>' + document.activeElement.textContent
}
<div id="editor" contenteditable="true" class="" tabIndex="1">
  <span>diyige span</span> saosuoasueousameli
</div>
<div id="info"></div>

когда я нажимаю / keyin на <span>deerge span</span>, информация покажет все редакторы div. так как я могу показать только <span>deerge span</span>?

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

document.activeElement вернет элемент, который в данный момент имеет фокус . В вашем случае единственным элементом, который захватывает фокус, является контейнер

.
. Вам нужно установить атрибут tabindex в вашем элементе , чтобы он был фокусируемым, но в вашем contenteditable область не настолько практична. Вместо этого вы, вероятно, захотите элемент Range.commonAncestorContainer , который будет самым глубоким узлом, на котором фактически находится текущий выбор, в вашем случае, где находится курсор. В случае свернутого выделения это должен быть TextNode, в котором находится курсор, вы можете получить элемент через его свойство .parentNode. editor.onmouseup = editclick; editor.onkeydown=editinput; function editclick(e) { let focus_elem = getElemAtCursor(); info.innerHTML += '<br>' + focus_elem.textContent; } function editinput(e) { const focus_elem = getElemAtCursor(); info.innerHTML += '<br>' + focus_elem.textContent; } function getElemAtCursor() { const elem = getSelection().getRangeAt(0).commonAncestorContainer; return elem.nodeType === 1 ? elem : elem.parentNode; } <div id="editor" contenteditable="true" class=""> <span>diyige span</span> saosuoasueousameli </div> <div id="info"></div>
1 голос
/ 12 апреля 2020

Использование e.target.textContent

Для событий мыши это работает, но для событий клавиатуры для вложенных contenteditable элементов вам необходимо применить небольшой взлом:

Установите contenteditable="true" для span и оберните его другим span, имеющим contenteditable="false"

Проверьте ниже код: 

editor.onmouseup = editclick;
editor.onkeypress = editKey;

function editclick(e) {
  info.innerHTML += '<br>' + e.target.textContent
}

function editKey(e) {
  info.innerHTML += '<br>' + e.target.textContent
}
body {
  background: #fff;
}
<div id="editor" contenteditable="true" class="" tabIndex="0">
  <span contenteditable="false">
    <span contenteditable="true">contenteditable span</span>
  </span><br/>
  contenteditable div content comes here. contenteditable div content comes here.
</div>
<div id="info"></div>
...