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

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

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

现在插入符号(闪烁的光标)在 <h1> 内闪烁元素，比如说 "|heading" 。

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

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

最佳答案

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

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

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}

关于javascript - 获取插入符位置的元素节点(在 contentEditable 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1197401/