javascript - 获取写入的节点

Question

我想获取写入时光标所在的节点

document.getElementById('parent').addEventListener('keypress', function(e) {

  console.log(e.target);
});

.root {
  padding-right: 1px;
}

#parent>div {
  border-color: yellow;
  float: left;
}

<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div class="root" id="1">Qué</div>
  <div class="root" id="2">es</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>

问题很复杂，因为我为每个单词使用一个 div。

我需要使用 div，以便您可以显示单词中的建议(我正在执行拼写检查)

Answer 1

您可以使用window.getSelection()获取光标下的实际节点:

document.getElementById('parent').addEventListener('keydown', event => {
  const actualTarget = window.getSelection().anchorNode.parentNode;
  console.log(actualTarget);
});

.root {
  padding-right: 1px;
}

#parent>div {
  border-color: yellow;
  float: left;
}

<div id="parent" contenteditable="true" style="border: black 2px solid; height:200px">
  <div class="root" id="1">Qué</div>
  <div class="root" id="2">es</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>