Get caret index in contenteditable div including tags

by

Have you tried this?
Get a range’s start and end offset’s relative to its parent container

Direct link to the jsfiddle:
https://jsfiddle.net/TjXEG/1/

Function code:

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;

More Related Contents:

  1. contenteditable change events
  2. contenteditable, set caret at the end of the text (cross-browser)
  3. Set cursor position on contentEditable
  4. Prevent contenteditable adding on ENTER – Chrome
  5. replace innerHTML in contenteditable div
  6. How to select all text in contenteditable div?
  7. How to disable elements selection and resizing in contenteditable div?
  8. How to make an HTML element editable cross-browser?
  9. Make a instead of by pressing Enter on a contenteditable
  10. Extracting text from a contentEditable div
  11. Get content of span
  12. contenteditable div backspace and deleting text node problems
  13. Set cursor after span element inside contenteditable div
  14. javascript change element from another page
  15. How can I disable clipboard and task-switching operations while my program or Web site is active?
  16. This doesn’t seem right? Javascript isn’t working
  17. console.log of element.children shows 0 length but has three entries when expanded later
  18. How to pass parameters using ui-sref in ui-router to controller
  19. How to implement “select all” check box in HTML?
  20. (HTML) Download a PDF file instead of opening them in browser when clicked
  21. How to append text to a “?
  22. Prevent zoom cross-browser
  23. HTML/Javascript: how to access JSON data loaded in a script tag with src set
  24. Attach a body onload event with JS
  25. Create table with jQuery – append
  26. Screen Scraping from a web page with a lot of Javascript [closed]
  27. Trying to load local JSON file to show data in a html page using JQuery
  28. Refresh iFrame (Cache Issue)
  29. How to make the HTML renders before the alert is triggered?
  30. Could a website force the browser to go into fullscreen mode?

Leave a Comment