How to set the caret (cursor) position in a contenteditable element (div)?

by

In most browsers, you need the Range and Selection objects. You specify each of the selection boundaries as a node and an offset within that node. For example, to set the caret to the fifth character of the second line of text, you’d do the following:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}
<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>

<button id="button" onclick="setCaret()">focus</button>

IE < 9 works completely differently. If you need to support these browsers, you’ll need different code.

jsFiddle example: http://jsfiddle.net/timdown/vXnCM/

More Related Contents:

  1. Set cursor position on contentEditable
  2. contenteditable change events
  3. Get contentEditable caret position
  4. Insert html at caret in a contenteditable div
  5. contenteditable, set caret at the end of the text (cross-browser)
  6. How to move cursor to end of contenteditable entity
  7. How to replace selected text with html in a contenteditable element? [duplicate]
  8. Prevent contenteditable adding on ENTER – Chrome
  9. How to get the focused element with jQuery?
  10. Javascript Contenteditable – set Cursor / Caret to index
  11. How to select all text in contenteditable div?
  12. How to find cursor position in a contenteditable DIV?
  13. Get element node at caret position (in contentEditable)
  14. Saving and Restoring caret position for contentEditable div
  15. Limiting the number of characters in a ContentEditable div
  16. jquery Setting cursor position in contenteditable div
  17. Extracting text from a contentEditable div
  18. Get content of span
  19. Tag-like autocompletion and caret/cursor movement in contenteditable elements
  20. How to use JavaScript variables in jQuery selectors?
  21. Get querystring from URL using jQuery [duplicate]
  22. Convert image from url to Base64
  23. How do I detect “shift+enter” and generate a new line in Textarea?
  24. Sort an array by the “Levenshtein Distance” with best performance in Javascript
  25. jquery validate plugin on dynamic form inputs not working
  26. Convert String to XML Document in JavaScript
  27. How to get form data as a object in jquery [duplicate]
  28. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  29. JQuery AutoComplete, manually select first searched item and bind click [duplicate]
  30. Google maps responsive resize

Leave a Comment