Get contentEditable caret index position

Question

I m finding tons of good  crossbrowser anwers on how to SET the cursor or caret index position in a contentEditable element  but none on how to GET or find its index     What I want to do is know the index of the caret within this div  on keyup    So  when the user is typing text  I can at any point know its cursor s index within the contentEditable element   EDIT  I m looking for the INDEX within the div contents  text   not the cursor coordinates    lt div id  contentBox  contentEditable  true  gt  lt  div gt       contentbox   keyup function

User · Answer

As this took me forever to figure out using the new window.getSelection API I am going to share for posterity. Note that MDN suggests there is wider support for window.getSelection, however, your mileage may vary.

const getSelectionCaretAndLine = () => {
    // our editable div
    const editable = document.getElementById('editable');

    // collapse selection to end
    window.getSelection().collapseToEnd();

    const sel = window.getSelection();
    const range = sel.getRangeAt(0);

    // get anchor node if startContainer parent is editable
    let selectedNode = editable === range.startContainer.parentNode
      ? sel.anchorNode 
      : range.startContainer.parentNode;

    if (!selectedNode) {
        return {
            caret: -1,
            line: -1,
        };
    }

    // select to top of editable
    range.setStart(editable.firstChild, 0);

    // do not use 'this' sel anymore since the selection has changed
    const content = window.getSelection().toString();
    const text = JSON.stringify(content);
    const lines = (text.match(/\\n/g) || []).length + 1;

    // clear selection
    window.getSelection().collapseToEnd();

    // minus 2 because of strange text formatting
    return {
        caret: text.length - 2, 
        line: lines,
    }
}

Here is a jsfiddle that fires on keyup. Note however, that rapid directional key presses, as well as rapid deletion seems to be skip events.

User · Answer

function getCaretPosition         var x   0      var y   0      var sel   window getSelection        if sel rangeCount            var range   sel getRangeAt 0  cloneRange            if range getClientRects              range collapse true           var rect   range getClientRects   0           if rect                y   rect top              x   rect left                                return           x  x          y  y

User · Answer

Kinda late to the party  but in case anyone else is struggling  None of the Google searches I ve found for the past two days have come up with anything that works  but I came up with a concise and elegant solution that will always work no matter how many nested tags you have    x000D   x000D  function cursor position     x000D      var sel   document getSelection    x000D      sel modify  extend    backward    paragraphboundary    x000D      var pos   sel toString   length  x000D      if sel anchorNode    undefined  sel collapseToEnd    x000D   x000D      return pos  x000D    x000D   x000D     Demo  x000D  var elm   document querySelector   contenteditable     x000D  elm addEventListener  click   printCaretPosition  x000D  elm addEventListener  keydown   printCaretPosition  x000D   x000D  function printCaretPosition    x000D    console log  cursor position     length    this textContent trim   length   x000D    x000D   lt div contenteditable gt some text here  lt i gt italic text here lt  i gt  some other text here  lt b gt bold text here lt  b gt  end of text lt  div gt  x000D   x000D   x000D    It selects all the way back to the beginning of the paragraph and then counts the length of the string to get the current position and then undoes the selection to return the cursor to the current position  If you want to do this for an entire document  more than one paragraph   then change paragraphboundary to documentboundary or whatever granularity for your case  Check out the API for more details  Cheers

User · Answer

window getSelection  - vs - document selection    This one works for me    x000D   x000D  function getCaretCharOffset element    x000D    var caretOffset   0  x000D   x000D    if  window getSelection    x000D      var range   window getSelection   getRangeAt 0   x000D      var preCaretRange   range cloneRange    x000D      preCaretRange selectNodeContents element   x000D      preCaretRange setEnd range endContainer  range endOffset   x000D      caretOffset   preCaretRange toString   length  x000D       x000D   x000D    else if  document selection  amp  amp  document selection type     Control     x000D      var textRange   document selection createRange    x000D      var preCaretTextRange   document body createTextRange    x000D      preCaretTextRange moveToElementText element   x000D      preCaretTextRange setEndPoint  EndToEnd   textRange   x000D      caretOffset   preCaretTextRange text length  x000D      x000D   x000D    return caretOffset  x000D    x000D   x000D   x000D     Demo  x000D  var elm   document querySelector   contenteditable     x000D  elm addEventListener  click   printCaretPosition  x000D  elm addEventListener  keydown   printCaretPosition  x000D   x000D  function printCaretPosition    x000D    console log  getCaretCharOffset elm    length    this textContent trim   length   x000D    x000D   lt div contenteditable gt some text here  lt i gt italic text here lt  i gt  some other text here  lt b gt bold text here lt  b gt  end of text lt  div gt  x000D   x000D   x000D    The calling line depends on event type   for key event use this   getCaretCharOffsetInDiv e target       window getSelection   getRangeAt 0  startContainer parentNode  index       for mouse event use this   getCaretCharOffsetInDiv e target parentElement       e target  index      on these two cases I take care for break lines by adding the target index

User · Answer

Try this   Caret js Get caret postion and offset from text field  https   github com ichord Caret js  demo  http   ichord github com Caret js

User · Answer

The following code assumes    There is always a single text node within the editable  lt div gt  and no other nodes The editable div does not have the CSS white-space property set to pre   If you need a more general approach that will work content with nested elements  try this answer   https   stackoverflow com a 4812022 96100  Code    x000D   x000D  function getCaretPosition editableDiv    x000D    var caretPos   0  x000D      sel  range  x000D    if  window getSelection    x000D      sel   window getSelection    x000D      if  sel rangeCount    x000D        range   sel getRangeAt 0   x000D        if  range commonAncestorContainer parentNode    editableDiv    x000D          caretPos   range endOffset  x000D          x000D        x000D      else if  document selection  amp  amp  document selection createRange    x000D      range   document selection createRange    x000D      if  range parentElement      editableDiv    x000D        var tempEl   document createElement  span    x000D        editableDiv insertBefore tempEl  editableDiv firstChild   x000D        var tempRange   range duplicate    x000D        tempRange moveToElementText tempEl   x000D        tempRange setEndPoint  EndToEnd   range   x000D        caretPos   tempRange text length  x000D        x000D      x000D    return caretPos  x000D    x000D   caretposition   x000D    font-weight  bold  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  contentbox  contenteditable  true  gt Click me and move cursor with keys or mouse lt  div gt  x000D   lt div id  caretposition  gt 0 lt  div gt  x000D   lt script gt  x000D    var update   function     x000D          caretposition   html getCaretPosition this    x000D       x000D        contentbox   on  mousedown mouseup keydown keyup   update   x000D   lt  script gt  x000D   x000D   x000D

User · Answer

If you set the editable div style to  quot display inline-block  white-space  pre-wrap quot  you don t get new child divs when you enter a new line  you just get LF character  i e   amp  10     x000D   x000D  function showCursPos        selection   document getSelection        childOffset   selection focusOffset      const range   document createRange        eDiv   document getElementById  eDiv        range setStart eDiv  0       range setEnd selection focusNode  childOffset       var sHtml   range toString        p   sHtml length       sHtml sHtml replace    r  gm     r        sHtml sHtml replace    n  gm     n        document getElementById  caretPosHtml   value p      document getElementById  exHtml   value sHtml         x000D  click type in div below   lt br gt   lt div contenteditable name  eDiv  id  eDiv         onkeyup  showCursPos    onclick  showCursPos          style  width  10em  border  1px solid  display inline-block  white-space  pre-wrap          gt 123 amp  13  amp  10 456 amp  10 789 lt  div gt   lt p gt  html caret position  lt br gt   lt input type  text  id  caretPosHtml  gt   lt p gt    html from start of div  lt br gt   lt input type  text  id  exHtml  gt  x000D   x000D   x000D   What I noticed was when you press  quot enter quot  in the editable div  it creates a new node  so the focusOffset resets to zero  This is why I ve had to add a range variable  and extend it from the child nodes  focusOffset back to the start of eDiv  and thus capturing all text in-between

User · Answer

A few wrinkles that I don t see being addressed in other answers    the element can contain multiple levels of child nodes  e g  child nodes that have child nodes that have child nodes     a selection can consist of different start and end positions  e g  multiple chars are selected  the node containing a Caret start end may not be either the element or its direct children   Here s a way to get start and end positions as offsets to the element s textContent value      node walk  walk the element tree  stop when func node  returns false function node walk node  func      var result   func node     for node   node firstChild  result     false  amp  amp  node  node   node nextSibling      result   node walk node  func     return result         getCaretPosition  return  start  end  as offsets to elem textContent that      correspond to the selected portion of text       if start    end  caret is at given position and no text is selected  function getCaretPosition elem      var sel   window getSelection      var cum length    0  0      if sel anchorNode    elem      cum length    sel anchorOffset  sel extentOffset     else       var nodes to find    sel anchorNode  sel extentNode       if  elem contains sel anchorNode      elem contains sel extentNode         return undefined      else         var found    0 0         var i        node walk elem  function node            for i   0  i  lt  2  i                if node    nodes to find i                 found i    true              if found i    0   1   0                 return false     all done                                if node textContent  amp  amp   node firstChild              for i   0  i  lt  2  i                  if  found i                 cum length i     node textContent length                                        cum length 0     sel anchorOffset        cum length 1     sel extentOffset              if cum length 0   lt   cum length 1       return cum length    return  cum length 1   cum length 0

User · Answer

A straight forward way  that iterates through all the chidren of the contenteditable div until it hits the endContainer   Then I add the end container offset and we have the character index  Should work with any number of nestings   uses recursion   Note  requires a poly fill for ie to support Element closest  div contenteditable     https   codepen io alockwood05 pen vMpdmZ  function caretPositionIndex         const range   window getSelection   getRangeAt 0       const   endContainer  endOffset     range          get contenteditableDiv from our endContainer node     let contenteditableDiv      const contenteditableSelector    div contenteditable        switch  endContainer nodeType          case Node TEXT NODE          contenteditableDiv   endContainer parentElement closest contenteditableSelector           break        case Node ELEMENT NODE          contenteditableDiv   endContainer closest contenteditableSelector           break            if   contenteditableDiv  return           const countBeforeEnd   countUntilEndContainer contenteditableDiv  endContainer       if  countBeforeEnd error   return null      return countBeforeEnd count   endOffset       function countUntilEndContainer parent  endNode  countingState    count  0           for  let node of parent childNodes            if  countingState done  break          if  node     endNode              countingState done   true            return countingState                    if  node nodeType     Node TEXT NODE              countingState count    node length            else if  node nodeType     Node ELEMENT NODE              countUntilEndContainer node  endNode  countingState             else             countingState error   true                          return countingState

User · Answer

x000D   x000D      editable   on  keydown keyup mousedown mouseup  function e   x000D        x000D         if   window getSelection   anchorNode  is   this     x000D             position   html  0   x000D          else  x000D               position   html window getSelection   anchorOffset   x000D           x000D       x000D  body  x000D    padding 40px  x000D    x000D   editable  x000D    height 50px  x000D    width 400px  x000D    border 1px solid  000  x000D    x000D   editable p  x000D    margin 0  x000D    padding 0  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 1 jquery min js  gt  lt  script gt  x000D   lt div contenteditable  true  id  editable  gt move the cursor to see position lt  div gt  x000D   lt div gt  x000D  position    lt span id  position  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This one builds on  alockwood05 s answer and provides both get and set functionality for a caret with nested tags inside the contenteditable div as well as the offsets within nodes so that you have a solution that is both serializable and de-serializable by offsets as well  I m using this solution in a cross-platform code editor that needs to get the caret start end position prior to syntax highlighting via a lexer parser and then set it back immediately afterward  function countUntilEndContainer parent  endNode  offset  countingState    count  0         for  let node of parent childNodes            if  countingState done  break          if  node     endNode                countingState done   true              countingState offsetInNode   offset              return countingState                    if  node nodeType     Node TEXT NODE                countingState offsetInNode   offset              countingState count    node length            else if  node nodeType     Node ELEMENT NODE                countUntilEndContainer node  endNode  offset  countingState             else               countingState error   true                      return countingState     function countUntilOffset parent  offset  countingState    count  0         for  let node of parent childNodes            if  countingState done  break          if  node nodeType     Node TEXT NODE                if  countingState count  lt   offset  amp  amp  offset  lt  countingState count   node length                                countingState offsetInNode   offset - countingState count                  countingState node   node                   countingState done   true                   return countingState                             else                    countingState count    node length                           else if  node nodeType     Node ELEMENT NODE                countUntilOffset node  offset  countingState             else               countingState error   true                      return countingState     function getCaretPosition         let editor   document getElementById  editor        let sel   window getSelection        if  sel rangeCount     0    return null        let range   sel getRangeAt 0           let start   countUntilEndContainer editor  range startContainer  range startOffset       let end   countUntilEndContainer editor  range endContainer  range endOffset       let offsetsCounts     start  start count   start offsetInNode  end  end count   end offsetInNode        let offsets     start  start  end  end  offsets  offsetsCounts        return offsets     function setCaretPosition start  end        let editor   document getElementById  editor        let sel   window getSelection        if  sel rangeCount     0    return null        let range   sel getRangeAt 0       let startNode   countUntilOffset editor  start       let endNode   countUntilOffset editor  end       let newRange   new Range        newRange setStart startNode node  startNode offsetInNode       newRange setEnd endNode node  endNode offsetInNode       sel removeAllRanges        sel addRange newRange       return true

User · Answer

global savedrange variable to store text range in var savedrange   null   function getSelection         var savedRange      if window getSelection  amp  amp  window getSelection   rangeCount  gt  0    FF Chrome Opera Safari IE9                savedRange   window getSelection   getRangeAt 0  cloneRange              else if document selection   IE 8 and lower                savedRange   document selection createRange              return savedRange         contentbox   keyup function          var currentRange   getSelection        if window getSelection                  do stuff with standards based object           else if document selection                   do stuff with microsoft object  ie8 and lower              Note  the range object its self can be stored in a variable  and can be re-selected at any time unless the contents of the contenteditable div change   Reference for IE 8 and lower  http   msdn microsoft com en-us library ms535872 VS 85  aspx  Reference for standards  all other  browsers  https   developer mozilla org en DOM range  its the mozilla docs  but code works in chrome  safari  opera and ie9 too

[javascript] Get contentEditable caret index position

Examples related to javascript

Examples related to contenteditable

Examples related to caret

Examples related to cursor-position