javascript - 在插入符号位置获取元素节点（在 contentEditable 中）

Question

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

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

现在插入符号（闪烁的光标）在<h1>元素内闪烁，让我们在单词中说"|heading"。

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

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

score 59 · Accepted Answer

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

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

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

1 回答 1