获取插入符号位置的元素节点(在 contentEditable 中)

IT技术 javascript dom webkit contenteditable caret
2021-03-15 09:45:39

假设我有一些这样的 HTML 代码:

<body contentEditable="true">
   <h1>Some heading text here</h1>
   <p>Some text here</p>
</body>

现在插入符号(闪烁的光标)在<h1>元素内闪烁,让我们说单词"|heading".

如何使用 JavaScript 获取插入符号所在的元素?在这里,我想获取节点名称:"h1".

这需要仅在 WebKit 中工作(它嵌入在应用程序中)。它最好也适用于选择。

1个回答

首先,想想为什么你这样做。如果您试图阻止用户编辑某些元素,只需将contenteditable这些元素设置为 false。

但是,可以按照您的要求进行操作。下面的代码适用于 Safari 4,并将返回选择锚定的节点(即用户开始选择的位置,选择“向后”将返回结尾而不是开头)——如果你想要元素类型作为字符串,只需获取nodeName返回节点属性。这也适用于零长度选择(即只是插入符号位置)。

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
node.nodeType == 3 会更好地检查文本节点。
2021-04-28 09:45:39
在 JavaFX HTMLEditor 中使用它可以很好地返回光标/文本插入符号放置在 contentEditable 部分的元素,谢谢!作为旁注, document.activeElement 被识别但总是返回不是很有帮助的 body 元素。
2021-04-28 09:45:39
我不想以任何方式阻止用户,我真的只需要节点的名称,以便我可以更新 UI 的一部分。感谢您提供答案,这很好用。
2021-05-03 09:45:39
window.getSelection().baseNode也会起作用。相关主题
2021-05-14 09:45:39
在大多数情况下,您应该使用window.getSelection而不是document哪个更好
2021-05-17 09:45:39