Fatal编程技术网
  • javascript/
  • Javascript 获取插入符号位置的元素节点（在contentEditable中）

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

javascript dom

Javascript 获取插入符号位置的元素节点（在contentEditable中）,javascript,dom,webkit,contenteditable,caret,Javascript,Dom,Webkit,Contenteditable,Caret,假设我有一些如下的HTML代码： <body contentEditable="true"> <h1>Some heading text here</h1> <p>Some text here</p> </body> 这里有一些标题文本 这里有一些文字 现在插入符号（闪烁的光标）在元素中闪烁，比如在单词“| heading”中 如何使用JavaScript获取插入符号所在的元素？在这里，我想获得节点名：“h

假设我有一些如下的HTML代码：

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


这里有一些标题文本
这里有一些文字
现在插入符号（闪烁的光标）在
元素中闪烁，比如在单词
“| heading”
中

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

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

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

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

我没有试图以任何方式阻止用户，我只需要节点的名称，这样我就可以更新UI的一部分。感谢您提供答案，这非常有效。
node.nodeType==3
将是检查文本节点的更好方法。在JavaFX HTMLEditor中使用此选项可以很好地返回光标/文本插入符号放置在contentEditable部分的元素，谢谢！作为旁注，document.activeElement可以识别，但总是返回body元素，这不是很有帮助。您应该使用and，而在大多数情况下，这是更好的
window.getSelection（）。baseNode
也可以工作。 
function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}