ansaurus

Question

How can I get the element the caret is in with Javascript, when using contentEditable?

Answer 1

+2 A:

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;
    var startNode = (node.nodeName == "#text" ? node.parentNode : node);
    return startNode;
}

You 2009-07-31 11:13:35

I'm not trying to block the user in any way, I really just need the name of the node so I can update a part of the UI. Thank you for providing the answer, this works great.

Lucas 2009-07-31 11:58:37

ansaurus

tags:

views:

answers:

How can I get the element the caret is in with Javascript, when using contentEditable?

related questions