How to set caret cursor position in contenteditable element div

Question

I have this simple HTML as an example    lt div id  editable  contenteditable  true  gt    text text text lt br gt    text text text lt br gt    text text text lt br gt   lt  div gt   lt button id  button  gt focus lt  button gt    I want simple thing - when I click the button  I want to place caret cursor  into specific place in the editable div  From searching over the web  I have this JS attached to button click  but it doesn t work  FF  Chrome    var range   document createRange    var myDiv   document getElementById  editable    range setStart myDiv  5   range setEnd myDiv  5     Is it possible to set manually caret position like this

User · Answer

const el   document getElementById  editable      el focus     let char   1  sel     character at which to place caret    if  document selection        sel   document selection createRange        sel moveStart  character   char       sel select          else       sel   window getSelection        sel collapse el lastChild  char

User · Answer

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   x000D   x000D  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    x000D   lt div id  editable  contenteditable  true  gt    text text text lt br gt text text text lt br gt text text text lt br gt   lt  div gt    lt button id  button  onclick  setCaret    gt focus lt  button gt  x000D   x000D   x000D   IE  lt  9 works completely differently  If you need to support these browsers  you ll need different code  jsFiddle example  http   jsfiddle net timdown vXnCM

User · Answer

If you don t want to use jQuery you can try this approach   public setCaretPosition         const editableDiv   document getElementById  contenteditablediv        const lastLine   this input nativeElement innerHTML replace       lt br gt   g           const selection   window getSelection        selection collapse editableDiv childNodes editableDiv childNodes length - 1   lastLine length       editableDiv you editable element  don t forget to set an id for it  Then you need to get your innerHTML from the element and cut all brake lines  And just set collapse with next arguments

User · Answer

I m writting a syntax highlighter  and basic code editor   and I needed to know how to auto-type a single quote char and move the caret back  like a lot of code editors nowadays    Heres a snippet of my solution  thanks to much help from this thread  the MDN docs  and a lot of moz console watching      onKeyPress event  if  evt key                 let sel   window getSelection        let offset   sel focusOffset      let focus   sel focusNode       focus textContent            setting div s innerText directly creates new       nodes  which invalidate our selections  so we modify the focusNode directly      let range   document createRange        range selectNode focus       range setStart focus  offset        range collapse true       sel removeAllRanges        sel addRange range        end onKeyPress event   This is in a contenteditable div element  I leave this here as a thanks  realizing there is already an accepted answer

User · Answer

I think it s not simple to set caret to some position in contenteditable element  I wrote my own code for this  It bypasses the node tree calcing how many characters left and sets caret in needed element  I didn t test this code much     Set offset in current contenteditable field  for start by default or for with forEnd true  function setCurSelectionOffset offset  forEnd   false        const sel   window getSelection        if  sel rangeCount     1     document activeElement  return       const firstRange   sel getRangeAt 0        if  offset  gt  0            bypassChildNodes document activeElement  offset        else          if  forEnd              firstRange setEnd document activeElement  0           else             firstRange setStart document activeElement  0                  Bypass in depth     function bypassChildNodes el  leftOffset            const childNodes   el childNodes           for  let i   0  i  lt  childNodes length  amp  amp  leftOffset  i                  const childNode   childNodes i                if  childNode nodeType     3                    const curLen   childNode textContent length                   if  curLen  gt   leftOffset                        if  forEnd                          firstRange setEnd childNode  leftOffset                       else                         firstRange setStart childNode  leftOffset                       return 0                   else                      leftOffset -  curLen                                 else             if  childNode nodeType     1                    leftOffset   bypassChildNodes childNode  leftOffset                                    return leftOffset            I also wrote code to get current caret position  didn t test      Get offset in current contenteditable field  start offset by default or end offset with calcEnd true  function getCurSelectionOffset calcEnd   false        const sel   window getSelection        if  sel rangeCount     1     document activeElement  return 0       const firstRange       sel getRangeAt 0             startContainer   calcEnd   firstRange endContainer   firstRange startContainer            startOffset      calcEnd   firstRange endOffset      firstRange startOffset      let needStop   false       return bypassChildNodes document activeElement            Bypass in depth     function bypassChildNodes el            const childNodes   el childNodes          let ans   0           if  el     startContainer                if  startContainer nodeType     3                    ans   startOffset               else             if  startContainer nodeType     1                    for  let i   0  i  lt  startOffset  i                          const childNode   childNodes i                        ans    childNode nodeType     3   childNode textContent length                              childNode nodeType     1   childNode innerText length                              0                                               needStop   true           else              for  let i   0  i  lt  childNodes length  amp  amp   needStop  i                      const childNode   childNodes i                   ans    bypassChildNodes childNode                                    return ans            You also need to be aware of range startOffset and range endOffset contain character offset for text nodes  nodeType     3  and child node offset for element nodes  nodeType     1   range startContainer and range endContainer may refer to any element node of any level in the tree  of course they also can refer to text nodes

User · Answer

x000D   x000D  function set mouse     x000D    var as   document getElementById  editable    x000D    el   as childNodes 1  childNodes 0     goal is to get   we   id to write  object Text  because it work only in object text x000D    var range   document createRange    x000D    var sel   window getSelection    x000D    range setStart el  1   x000D    range collapse true   x000D    sel removeAllRanges    x000D    sel addRange range   x000D   x000D    document getElementById  we   innerHTML   el     see out put of we id x000D    x000D   lt div id  editable  contenteditable  true  gt dddddddddddddddddddddddddddd x000D     lt p gt dd lt  p gt psss x000D     lt p gt dd lt  p gt  x000D     lt p gt dd lt  p gt  x000D     lt p gt text text text lt  p gt  x000D   lt  div gt  x000D   lt p id  we  gt  lt  p gt  x000D   lt button onclick  set mouse    gt focus lt  button gt  x000D   x000D   x000D    It is very hard set caret in proper position when you have advance element like  p   span  etc  The goal is to get  object text     lt div id  editable  contenteditable  true  gt dddddddddddddddddddddddddddd lt p gt dd lt  p gt psss lt p gt dd lt  p gt       lt p gt dd lt  p gt       lt p gt text text text lt  p gt   lt  div gt   lt p id  we  gt  lt  p gt   lt button onclick  set mouse    gt focus lt  button gt   lt script gt       function set mouse             var as   document getElementById  editable            el   as childNodes 1  childNodes 0    goal is to get   we   id to write  object Text  because it work only in object text         var range   document createRange            var sel   window getSelection            range setStart el  1           range collapse true           sel removeAllRanges            sel addRange range            document getElementById  we   innerHTML   el    see out put of we id        lt  script gt

User · Answer

Based on Tim Down s answer  but it checks for the last known  good  text row  It places the cursor at the very end   Furthermore  I could also recursively iteratively check the last child of each consecutive last child to find the absolute last  good  text node in the DOM    x000D   x000D  function onClickHandler     x000D    setCaret document getElementById  editable     x000D    x000D   x000D  function setCaret el    x000D    let range   document createRange    x000D        sel   window getSelection    x000D        lastKnownIndex   -1  x000D    for  let i   0  i  lt  el childNodes length  i      x000D      if  isTextNodeAndContentNoEmpty el childNodes i      x000D        lastKnownIndex   i  x000D        x000D      x000D    if  lastKnownIndex     -1    x000D      throw new Error  Could not find valid text content    x000D      x000D    let row   el childNodes lastKnownIndex   x000D        col   row textContent length  x000D    range setStart row  col   x000D    range collapse true   x000D    sel removeAllRanges    x000D    sel addRange range   x000D    el focus    x000D    x000D   x000D  function isTextNodeAndContentNoEmpty node    x000D    return node nodeType    Node TEXT NODE  amp  amp  node textContent trim   length  gt  0 x000D    x000D   lt div id  editable  contenteditable  true  gt  x000D    text text text lt br gt text text text lt br gt text text text lt br gt  x000D   lt  div gt  x000D   lt button id  button  onclick  onClickHandler    gt focus lt  button gt  x000D   x000D   x000D

User · Answer

I refactored  Liam s answer  I put it in a class with static methods  I made its functions receive an element instead of an  id  and some other small tweaks  This code is particularly good for fixing the cursor in a rich text box that you might be making with  lt div contenteditable  quot true quot  gt   I was stuck on this for several days before arriving at the below code  edit  His answer and this answer have a bug involving hitting enter  Since enter doesn t count as a character  the cursor position gets messed up after hitting enter  If I am able to fix the code  I will update my answer  edit2  Save yourself a lot of headaches and make sure your  lt div contenteditable true gt  is display  inline-block  This fixes some bugs related to Chrome putting  lt div gt  instead of  lt br gt  when you press enter  How To Use let richText   document getElementById  rich-text    let offset   Cursor getCurrentCursorPosition richText      do stuff to the innerHTML  such as adding removing  lt span gt  tags Cursor setCurrentCursorPosition offset  richText   richText focus     Code    Credit to Liam  Stack Overflow     https   stackoverflow com a 41034697 3480193 class Cursor       static getCurrentCursorPosition parentElement            var selection   window getSelection                charCount   -1              node                   if  selection focusNode                if  Cursor  isChildOf selection focusNode  parentElement                     node   selection focusNode                   charCount   selection focusOffset                                   while  node                        if  node     parentElement                            break                                             if  node previousSibling                            node   node previousSibling                          charCount    node textContent length                        else                           node   node parentNode                          if  node     null                                break                                                                                                             return charCount                 static setCurrentCursorPosition chars  element            if  chars  gt   0                var selection   window getSelection                             let range   Cursor  createRange element    count  chars                  if  range                    range collapse false                   selection removeAllRanges                    selection addRange range                                          static  createRange node  chars  range            if   range                range   document createRange               range selectNode node               range setStart node  0                      if  chars count     0                range setEnd node  chars count             else if  node  amp  amp  chars count  gt 0                if  node nodeType     Node TEXT NODE                    if  node textContent length  lt  chars count                        chars count -  node textContent length                    else                       range setEnd node  chars count                       chars count   0                                  else                   for  var lp   0  lp  lt  node childNodes length  lp                          range   Cursor  createRange node childNodes lp   chars  range                        if  chars count     0                        break                                                                            return range                 static  isChildOf node  parentElement            while  node     null                if  node     parentElement                    return true                            node   node parentNode                     return false

User · Answer

Most answers you find on contenteditable cursor positioning are fairly simplistic in that they only cater for inputs with plain vanilla text  Once you using html elements within the container the text entered gets split into nodes and distributed liberally across a tree structure   To set the cursor position I have this function which loops round all the child text nodes within the supplied node and sets a range from the start of the initial node to the chars count character   function createRange node  chars  range        if   range            range   document createRange           range selectNode node           range setStart node  0              if  chars count     0            range setEnd node  chars count         else if  node  amp  amp  chars count  gt 0            if  node nodeType     Node TEXT NODE                if  node textContent length  lt  chars count                    chars count -  node textContent length                else                   range setEnd node  chars count                   chars count   0                          else              for  var lp   0  lp  lt  node childNodes length  lp                      range   createRange node childNodes lp   chars  range                    if  chars count     0                        break                                                        return range       I then call the routine with this function   function setCurrentCursorPosition chars        if  chars  gt   0            var selection   window getSelection             range   createRange document getElementById  test   parentNode    count  chars              if  range                range collapse false               selection removeAllRanges                selection addRange range                        The range collapse false  sets the cursor to the end of the range  I ve tested it with the latest versions of Chrome  IE  Mozilla and Opera and they all work fine   PS  If anyone is interested I get the current cursor position using this code   function isChildOf node  parentId        while  node     null            if  node id     parentId                return true                    node   node parentNode             return false      function getCurrentCursorPosition parentId        var selection   window getSelection            charCount   -1          node       if  selection focusNode            if  isChildOf selection focusNode  parentId                 node   selection focusNode               charCount   selection focusOffset               while  node                    if  node id     parentId                        break                                     if  node previousSibling                        node   node previousSibling                      charCount    node textContent length                    else                        node   node parentNode                       if  node     null                             break                                                                         return charCount       The code does the opposite of the set function - it gets the current window getSelection   focusNode and focusOffset and counts backwards all text characters encountered until it hits a parent node with id of containerId  The isChildOf function just checks before running that the suplied node is actually a child of the supplied parentId   The code should work straight without change  but I have just taken it from a jQuery plugin I ve developed so have hacked out a couple of this s - let me know if anything doesn t work

User · Answer

I made this for my simple text editor   Differences from other methods    High performance Works with all spaces   usage     get current selection const  start  end    getSelectionOffset container      change container html container innerHTML   newHtml     restore selection setSelectionOffset container  start  end      use this instead innerText for get text with keep all spaces const innerText   getInnerText container  const textBeforeCaret   innerText substring 0  start  const textAfterCaret   innerText substring start    selection ts      return true if node found    function searchNode      container  Node      startNode  Node      predicate   node  Node    gt  boolean      excludeSibling   boolean     boolean       if  predicate startNode as Text             return true            for  let i   0  len   startNode childNodes length  i  lt  len  i              if  searchNode startNode  startNode childNodes i   predicate  true                 return true                      if   excludeSibling            let parentNode   startNode         while  parentNode  amp  amp  parentNode     container                let nextSibling   parentNode nextSibling             while  nextSibling                    if  searchNode container  nextSibling  predicate  true                         return true                                   nextSibling   nextSibling nextSibling                           parentNode   parentNode parentNode                      return false    function createRange container  Node  start  number  end  number   Range       let startNode     searchNode container  container  node   gt            if  node nodeType     Node TEXT NODE                const dataLength    node as Text  data length             if  start  lt   dataLength                    startNode   node                 return true                           start -  dataLength             end -  dataLength             return false                       let endNode     if  startNode            searchNode container  startNode  node   gt                if  node nodeType     Node TEXT NODE                    const dataLength    node as Text  data length                 if  end  lt   dataLength                        endNode   node                     return true                                   end -  dataLength                 return false                                     const range   document createRange       if  startNode            if  start  lt  startNode data length                range setStart startNode  start            else               range setStartAfter startNode                  else           if  start     0                range setStart container  0            else               range setStartAfter container                       if  endNode            if  end  lt  endNode data length                range setEnd endNode  end            else               range setEndAfter endNode                  else           if  end     0                range setEnd container  0            else               range setEndAfter container                       return range    export function setSelectionOffset node  Node  start  number  end  number        const range   createRange node  start  end      const selection   window getSelection       selection removeAllRanges       selection addRange range     function hasChild container  Node  node  Node   boolean       while  node            if  node     container                return true                   node   node parentNode            return false    function getAbsoluteOffset container  Node  offset  number        if  container nodeType     Node TEXT NODE            return offset            let absoluteOffset   0     for  let i   0  len   Math min container childNodes length  offset   i  lt  len  i              const childNode   container childNodes i          searchNode childNode  childNode  node   gt                if  node nodeType     Node TEXT NODE                    absoluteOffset     node as Text  data length                           return false                       return absoluteOffset    export function getSelectionOffset container  Node    number  number        let start   0     let end   0      const selection   window getSelection       for  let i   0  len   selection rangeCount  i  lt  len  i              const range   selection getRangeAt i          if  range intersectsNode container                 const startNode   range startContainer             searchNode container  container  node   gt                    if  startNode     node                        start    getAbsoluteOffset node  range startOffset                      return true                                    const dataLength   node nodeType     Node TEXT NODE                        node as Text  data length                       0                  start    dataLength                 end    dataLength                  return false                             const endNode   range endContainer             searchNode container  startNode  node   gt                    if  endNode     node                        end    getAbsoluteOffset node  range endOffset                      return true                                    const dataLength   node nodeType     Node TEXT NODE                        node as Text  data length                       0                  end    dataLength                  return false                             break                      return  start  end     export function getInnerText container  Node        const buffer          searchNode container  container  node   gt            if  node nodeType     Node TEXT NODE                buffer push  node as Text  data                    return false            return buffer join

[javascript] How to set caret(cursor) position in contenteditable element (div)?

Examples related to javascript

Examples related to jquery

Examples related to contenteditable

Examples related to caret

Examples related to cursor-position