获取您编写的节点

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>

Answer 2

尝试这种方法。建议您使用 keyup 事件在键入以生成建议列表后得到最终的单词：

document.querySelectorAll('.root').forEach(function(el) {
// Do stuff here
 el.onkeyup = function(e){
     console.log(e.target);
  };

}); 

.root {
  padding-right: 1px;
}

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

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