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

2024-04-03

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

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

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

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

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


首先,想一想why你正在做这个。如果您试图阻止用户编辑某些元素,只需设置contenteditable对这些元素设置为 false。

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

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取插入符位置的元素节点(在 contentEditable 中) 的相关文章

随机推荐