使用contentEditable时,如何使用Javascript获取插入符号元素?

时间:2009-07-29 00:01:08

标签: javascript webkit element contenteditable caret

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

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

现在,插入符号(闪烁的光标)在H1元素内部闪烁,让我们在单词“heading”中说。如何使用JavaScript获取插入符号元素的名称?在这里,我想得到“h1”。

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

1 个答案:

答案 0 :(得分:44)

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

然而,你可以做你所要求的。下面的代码在Safari 4中工作,并将返回选择所锚定的节点(即用户开始选择,选择“向后”将返回结束而不是开始) - 如果你想将元素类型作为字符串,只需获取返回节点的nodeName属性。这适用于零长度选择(即只是一个插入位置)。

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