Saving and Restoring caret position for contentEditable div

by

back to 2016 🙂
After I came across solutions here and they did not suit me, because my DOM was replaced completely after each typing. I’ve done more research and come with a simple solution that saves the cursor by character’s position that works perfect for me.

The idea is very simple.

  1. find the length of characters before caret and save it.
  2. change the DOM.
  3. using TreeWalker to walk just on text nodes of context node and counting characters until we got the right text node and the position inside it

Two edge case:

  1. content removed completely so there is no text node:
    so: move the cursor to the start of the context node

  2. there is less content than the index pointed on :
    so: move the cursor to the end of the last node

function saveCaretPosition(context){
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    range.setStart(  context, 0 );
    var len = range.toString().length;

    return function restore(){
        var pos = getTextNodeAtPosition(context, len);
        selection.removeAllRanges();
        var range = new Range();
        range.setStart(pos.node ,pos.position);
        selection.addRange(range);

    }
}

function getTextNodeAtPosition(root, index){
    const NODE_TYPE = NodeFilter.SHOW_TEXT;
    var treeWalker = document.createTreeWalker(root, NODE_TYPE, function next(elem) {
        if(index > elem.textContent.length){
            index -= elem.textContent.length;
            return NodeFilter.FILTER_REJECT
        }
        return NodeFilter.FILTER_ACCEPT;
    });
    var c = treeWalker.nextNode();
    return {
        node: c? c: root,
        position: index
    };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<link href="https://rawgit.com/PrismJS/prism/gh-pages/themes/prism.css" rel="stylesheet"/>
<style>
  *{
    outline: none
    }
</style>  
<h3>Edit the CSS Snippet </H3>
<pre>
    <code class="language-css" contenteditable=true >p { color: red }</code>
</pre>

<script >
  var code = document.getElementsByTagName('code')[0];
  
  code.addEventListener('input',function () {
        var restore = saveCaretPosition(this);
        Prism.highlightElement(this);
        restore();
    })
</script>

More Related Contents:

  1. contenteditable change events
  2. How to set the caret (cursor) position in a contenteditable element (div)?
  3. Insert html at caret in a contenteditable div
  4. Set cursor position on contentEditable
  5. How to replace selected text with html in a contenteditable element? [duplicate]
  6. Prevent contenteditable adding on ENTER – Chrome
  7. Javascript Contenteditable – set Cursor / Caret to index
  8. How to select all text in contenteditable div?
  9. Limiting the number of characters in a ContentEditable div
  10. Extracting text from a contentEditable div
  11. Get content of span
  12. Regular Expression jquery validation1 [duplicate]
  13. Can’t append element
  14. CORS – How do ‘preflight’ an httprequest?
  15. How to change value of object which is inside an array using JavaScript or jQuery?
  16. how to access iFrame parent page using jquery?
  17. How do I print part of a rendered HTML page in JavaScript?
  18. Is there a jQuery autogrow plugin for text fields?
  19. jQuery – script tags in the HTML are parsed out by jQuery and not executed
  20. Detect click event inside iframe
  21. Obtain a reference to parent element [duplicate]
  22. How do I encode a JavaScript object as JSON?
  23. Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)
  24. What is the best way to detect retina support on a device using JavaScript?
  25. Modifying a query string without reloading the page
  26. how to get selection inside a div using jquery/javascript
  27. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  28. Get Correct keyCode for keypad(numpad) keys
  29. window.open() simply adds the url to my current url
  30. Replacing selected text in the textarea

Leave a Comment