How can I get the element the caret is in with Jav

2019-01-09 00:43发布

站内文章 / JavaScript
38 0 0

问题:

Let's say I have some HTML code like this:

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

Now the caret (the blinking cursor) is blinking inside the H1 element, let's say in the word "heading". How can I get the name of the element the caret is in with JavaScript? Here I would like to get "h1".

This needs to work only in WebKit (it's embedded in an application). It should preferably also work for selections.

回答1:

Firstly, think about why you're doing this. If you're trying to stop users from editing certain elements, just set contenteditable to false on those elements.

However, it is possible to do what you ask. The code below works in Safari 4 and will return the node the selection is anchored in (i.e. where the user started to select, selecting "backwards" will return the end instead of the start) – if you want the element type as a string, just get the nodeName property of the returned node. This works for zero-length selections as well (i.e. just a caret position).

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


标签： javascript webkit element contenteditable caret
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~