代码之家 › 专栏 › 技术社区 › x-rw

找到你写的节点

javascript

x-rw · 技术社区 · 6 年前

我想得到写光标时光标所在的节点

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,这样你就可以用单词来显示建议(我正在做拼写检查)

2 回复 | 直到 6 年前

SimpleJ 6 年前

你可以用 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>

Facundo Larrosa 6 年前

试试这个方法。我建议你用弹起事件以获取键入后的最后一个单词,从而生成建议列表:

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前