Get element node at caret position (in contentEditable)

by

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

More Related Contents:

  1. How to set the caret (cursor) position in a contenteditable element (div)?
  2. Get contentEditable caret position
  3. contenteditable, set caret at the end of the text (cross-browser)
  4. React.js: onChange event for contentEditable
  5. How to clone or re-dispatch DOM events?
  6. INVALID_STATE_ERR: DOM Exception 11 (WebKit)
  7. Tag-like autocompletion and caret/cursor movement in contenteditable elements
  8. How to pass arguments to addEventListener listener function?
  9. How to append text to a “?
  10. Difference between “change” and “input” event for an `input` element
  11. Video auto play is not working in Safari and Chrome desktop browser
  12. Setting innerHTML vs. setting value with Javascript
  13. What is my script src URL?
  14. javascript access parent DOM across domains?
  15. Get caret position in HTML input?
  16. jQuery: how to change tag name?
  17. Why is the loop assigning a reference of the last index element to? [duplicate]
  18. Get the string representation of a DOM node
  19. Count immediate child div elements using jQuery
  20. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  21. Attach event listener through javascript to radio button
  22. Check whether HTML element has scrollbars
  23. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  24. Why doesn’t Node.js have a native DOM?
  25. Javascript / Chrome – How to copy an object from the webkit inspector as code
  26. Can I add arbitrary properties to DOM objects?
  27. Is there any way to find an element in a documentFragment?
  28. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  29. How do I manipulate the SVG DOM and create elements?
  30. Variation of e.touches, e.targetTouches and e.changedTouches

Leave a Comment