javascript - Get element node at caret position (in contentEditable)

Question

Welcome To Ask or Share your Answers For Others

javascript - Get element node at caret position (in contentEditable)

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Get element node at caret position (in contentEditable)

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 element the caret is in with JavaScript? Here I would like to get node name: "h1".

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:34:26+0000

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);
}

Categories

javascript - Get element node at caret position (in contentEditable)

javascript - Get element node at caret position (in contentEditable)

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags