document.activeElement can not get target element

Question

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>

when i click/keyin on the <span>deerge span</span>, the info will show all editor div. so how can i show only <span>deerge span</span> ?

Answer 1

document.activeElement will return the element that currently has the focus. In your case, the one element that grabs the focus is the container <div>.
You'd have to set the tabindex attribute on your <span> element for it to be focusable, but doing so in your contenteditable area is not that practical.

Instead you probably want the Range.commonAncestorContainer element, which will be the deepest Node where the current selection actually is, so in your case, where the cursor is. In case of collapsed selection, it should be the TextNode where the cursor is, you can retrieve the Element through its .parentNode property.

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>