Set keyboard caret position in html textbox

Question

Does anybody know how to move the keyboard caret in a textbox to a particular position   For example  if a text-box  e g  input element  not text-area  has 50 characters in it and I want to position the caret before character 20  how would I go about it   This is in differentiation from this question  jQuery Set Cursor Position in Text Area   which requires jQuery

User · Answer

I would fix the conditions like below   function setCaretPosition elemId  caretPos     var elem   document getElementById elemId    if  elem       if  typeof elem createTextRange     undefined          var range   elem createTextRange       range move  character   caretPos      range select          else        if  typeof elem selectionStart     undefined       elem selectionStart   caretPos     elem focus

User · Answer

HTMLInputElement setSelectionRange  selectionStart  selectionEnd       References var e   document getElementById   quot helloworldinput quot         Move caret to beginning on focus e addEventListener   quot focus quot   function  event            References     var e   event target          Action     e setSelectionRange  0  0                  Doesn   t work for focus event          window setTimeout  function                 e setSelectionRange  0  0              Works           e setSelectionRange  1  1            Move caret to second position           e setSelectionRange  1  2            Select second character         0        false     Browser compatibility  only for types  text  search  url  tel and password   https   developer mozilla org en-US docs Web API HTMLInputElement setSelectionRange Specifications

User · Answer

If you need to focus some textbox and your only problem is that the entire text gets highlighted whereas you want the caret to be at the end  then in that specific case  you can use this trick of setting the textbox value to itself after focus       myinputfield   focus   val     myinputfield   val

User · Answer

If you need to focus some textbox and your only problem is that the entire text gets highlighted whereas you want the caret to be at the end  then in that specific case  you can use this trick of setting the textbox value to itself after focus       myinputfield   focus   val     myinputfield   val

User · Answer

HTMLInputElement setSelectionRange  selectionStart  selectionEnd       References var e   document getElementById   quot helloworldinput quot         Move caret to beginning on focus e addEventListener   quot focus quot   function  event            References     var e   event target          Action     e setSelectionRange  0  0                  Doesn   t work for focus event          window setTimeout  function                 e setSelectionRange  0  0              Works           e setSelectionRange  1  1            Move caret to second position           e setSelectionRange  1  2            Select second character         0        false     Browser compatibility  only for types  text  search  url  tel and password   https   developer mozilla org en-US docs Web API HTMLInputElement setSelectionRange Specifications

User · Answer

Excerpted from Josh Stodola s Setting keyboard caret Position in a Textbox or TextArea with Javascript  A generic function that will allow you to insert the caret at any position of a textbox or textarea that you wish   function setCaretPosition elemId  caretPos        var elem   document getElementById elemId        if elem    null            if elem createTextRange                var range   elem createTextRange                range move  character   caretPos               range select                      else               if elem selectionStart                    elem focus                    elem setSelectionRange caretPos  caretPos                             else                 elem focus                        The first expected parameter is the ID of the element you wish to insert the keyboard caret on  If the element is unable to be found  nothing will happen  obviously   The second parameter is the caret positon index  Zero will put the keyboard caret at the beginning  If you pass a number larger than the number of characters in the elements value  it will put the keyboard caret at the end   Tested on IE6 and up  Firefox 2  Opera 8  Netscape 9  SeaMonkey  and Safari  Unfortunately on Safari it does not work in combination with the onfocus event      An example of using the above function to force the keyboard caret to jump to the end of all textareas on the page when they receive focus   function addLoadEvent func        if typeof window onload     function             window onload   func            else           if func                var oldLoad   window onload               window onload   function                     if oldLoad                          oldLoad                     func                                        The setCaretPosition function belongs right here   function setTextAreasOnFocus             This function will force the keyboard caret to be positioned    at the end of all textareas when they receive focus          var textAreas   document getElementsByTagName  textarea         for var i   0  i  lt  textAreas length  i              textAreas i  onfocus   function                 setCaretPosition this id  this value length                        textAreas   null     addLoadEvent setTextAreasOnFocus

User · Answer

I found an easy way to fix this issue  tested in IE and Chrome   function setCaret elemId  caret        var elem   document getElementById elemId      elem setSelectionRange caret  caret        Pass text box id and caret position to this function

User · Answer

Excerpted from Josh Stodola s Setting keyboard caret Position in a Textbox or TextArea with Javascript  A generic function that will allow you to insert the caret at any position of a textbox or textarea that you wish   function setCaretPosition elemId  caretPos        var elem   document getElementById elemId        if elem    null            if elem createTextRange                var range   elem createTextRange                range move  character   caretPos               range select                      else               if elem selectionStart                    elem focus                    elem setSelectionRange caretPos  caretPos                             else                 elem focus                        The first expected parameter is the ID of the element you wish to insert the keyboard caret on  If the element is unable to be found  nothing will happen  obviously   The second parameter is the caret positon index  Zero will put the keyboard caret at the beginning  If you pass a number larger than the number of characters in the elements value  it will put the keyboard caret at the end   Tested on IE6 and up  Firefox 2  Opera 8  Netscape 9  SeaMonkey  and Safari  Unfortunately on Safari it does not work in combination with the onfocus event      An example of using the above function to force the keyboard caret to jump to the end of all textareas on the page when they receive focus   function addLoadEvent func        if typeof window onload     function             window onload   func            else           if func                var oldLoad   window onload               window onload   function                     if oldLoad                          oldLoad                     func                                        The setCaretPosition function belongs right here   function setTextAreasOnFocus             This function will force the keyboard caret to be positioned    at the end of all textareas when they receive focus          var textAreas   document getElementsByTagName  textarea         for var i   0  i  lt  textAreas length  i              textAreas i  onfocus   function                 setCaretPosition this id  this value length                        textAreas   null     addLoadEvent setTextAreasOnFocus

User · Answer

I would fix the conditions like below   function setCaretPosition elemId  caretPos     var elem   document getElementById elemId    if  elem       if  typeof elem createTextRange     undefined          var range   elem createTextRange       range move  character   caretPos      range select          else        if  typeof elem selectionStart     undefined       elem selectionStart   caretPos     elem focus

User · Answer

function SetCaretEnd tID        tID            if   tID startsWith         tID         tID          tID  focus        var t     tID  val        if  t length    0    return          tID  val            tID  val t         tID  scrollTop   tID  0  scrollHeight

User · Answer

function SetCaretEnd tID        tID            if   tID startsWith         tID         tID          tID  focus        var t     tID  val        if  t length    0    return          tID  val            tID  val t         tID  scrollTop   tID  0  scrollHeight

User · Answer

Excerpted from Josh Stodola s Setting keyboard caret Position in a Textbox or TextArea with Javascript  A generic function that will allow you to insert the caret at any position of a textbox or textarea that you wish   function setCaretPosition elemId  caretPos        var elem   document getElementById elemId        if elem    null            if elem createTextRange                var range   elem createTextRange                range move  character   caretPos               range select                      else               if elem selectionStart                    elem focus                    elem setSelectionRange caretPos  caretPos                             else                 elem focus                        The first expected parameter is the ID of the element you wish to insert the keyboard caret on  If the element is unable to be found  nothing will happen  obviously   The second parameter is the caret positon index  Zero will put the keyboard caret at the beginning  If you pass a number larger than the number of characters in the elements value  it will put the keyboard caret at the end   Tested on IE6 and up  Firefox 2  Opera 8  Netscape 9  SeaMonkey  and Safari  Unfortunately on Safari it does not work in combination with the onfocus event      An example of using the above function to force the keyboard caret to jump to the end of all textareas on the page when they receive focus   function addLoadEvent func        if typeof window onload     function             window onload   func            else           if func                var oldLoad   window onload               window onload   function                     if oldLoad                          oldLoad                     func                                        The setCaretPosition function belongs right here   function setTextAreasOnFocus             This function will force the keyboard caret to be positioned    at the end of all textareas when they receive focus          var textAreas   document getElementsByTagName  textarea         for var i   0  i  lt  textAreas length  i              textAreas i  onfocus   function                 setCaretPosition this id  this value length                        textAreas   null     addLoadEvent setTextAreasOnFocus

User · Answer

I ve adjusted the answer of kd7 a little bit because elem selectionStart will evaluate to false when the selectionStart is incidentally 0   function setCaretPosition elem  caretPos        var range       if  elem createTextRange            range   elem createTextRange            range move  character   caretPos           range select          else           elem focus            if  elem selectionStart     undefined                elem setSelectionRange caretPos  caretPos

User · Answer

Excerpted from Josh Stodola s Setting keyboard caret Position in a Textbox or TextArea with Javascript  A generic function that will allow you to insert the caret at any position of a textbox or textarea that you wish   function setCaretPosition elemId  caretPos        var elem   document getElementById elemId        if elem    null            if elem createTextRange                var range   elem createTextRange                range move  character   caretPos               range select                      else               if elem selectionStart                    elem focus                    elem setSelectionRange caretPos  caretPos                             else                 elem focus                        The first expected parameter is the ID of the element you wish to insert the keyboard caret on  If the element is unable to be found  nothing will happen  obviously   The second parameter is the caret positon index  Zero will put the keyboard caret at the beginning  If you pass a number larger than the number of characters in the elements value  it will put the keyboard caret at the end   Tested on IE6 and up  Firefox 2  Opera 8  Netscape 9  SeaMonkey  and Safari  Unfortunately on Safari it does not work in combination with the onfocus event      An example of using the above function to force the keyboard caret to jump to the end of all textareas on the page when they receive focus   function addLoadEvent func        if typeof window onload     function             window onload   func            else           if func                var oldLoad   window onload               window onload   function                     if oldLoad                          oldLoad                     func                                        The setCaretPosition function belongs right here   function setTextAreasOnFocus             This function will force the keyboard caret to be positioned    at the end of all textareas when they receive focus          var textAreas   document getElementsByTagName  textarea         for var i   0  i  lt  textAreas length  i              textAreas i  onfocus   function                 setCaretPosition this id  this value length                        textAreas   null     addLoadEvent setTextAreasOnFocus

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt set caret position lt  title gt   lt script type  application javascript  gt     lt   CDATA  window onload   function       setCaret document getElementById  input1    13  13     function setCaret el  st  end     if  el setSelectionRange       el focus      el setSelectionRange st  end       else      if  el createTextRange         range   el createTextRange       range collapse true      range moveEnd  character   end      range moveStart  character   st      range select                  gt   lt  script gt   lt  head gt   lt body gt    lt textarea id  input1  name  input1  rows  10  cols  30  gt Happy kittens dancing lt  textarea gt    lt p gt  amp nbsp  lt  p gt    lt  body gt   lt  html gt

User · Answer

The link in the answer is broken  this one should work  all credits go to blog vishalon net    http   snipplr com view 5144 getset-cursor-in-html-textarea   In case the code gets lost again  here are the two main functions   function doGetCaretPosition ctrl     var CaretPos   0    if  ctrl selectionStart    ctrl selectionStart    0       Standard    CaretPos   ctrl selectionStart      else if  document selection       Legacy IE   ctrl focus       var Sel   document selection createRange       Sel moveStart   character   -ctrl value length     CaretPos   Sel text length       return  CaretPos       function setCaretPosition ctrl pos     if  ctrl setSelectionRange       ctrl focus      ctrl setSelectionRange pos pos       else if  ctrl createTextRange       var range   ctrl createTextRange      range collapse true     range moveEnd  character   pos     range moveStart  character   pos     range select

User · Answer

The link in the answer is broken  this one should work  all credits go to blog vishalon net    http   snipplr com view 5144 getset-cursor-in-html-textarea   In case the code gets lost again  here are the two main functions   function doGetCaretPosition ctrl     var CaretPos   0    if  ctrl selectionStart    ctrl selectionStart    0       Standard    CaretPos   ctrl selectionStart      else if  document selection       Legacy IE   ctrl focus       var Sel   document selection createRange       Sel moveStart   character   -ctrl value length     CaretPos   Sel text length       return  CaretPos       function setCaretPosition ctrl pos     if  ctrl setSelectionRange       ctrl focus      ctrl setSelectionRange pos pos       else if  ctrl createTextRange       var range   ctrl createTextRange      range collapse true     range moveEnd  character   pos     range moveStart  character   pos     range select

User · Answer

Since I actually really needed this solution  and the typical baseline solution  focus the input - then set the value equal to itself  doesn t work cross-browser  I spent some time tweaking and editing everything to get it working  Building upon  kd7 s code here s what I ve come up with   Enjoy  Works in IE6   Firefox  Chrome  Safari  Opera  Cross-browser caret positioning technique  example  moving the cursor to the END         USEAGE     returns a boolean true false if it worked or not     Parameters   Id of element  caretPosition you want   setCaretPosition  IDHERE   10      example   The meat and potatoes is basically  kd7 s setCaretPosition  with the biggest tweak being if  el selectionStart    el selectionStart     0   in firefox the selectionStart is starting at 0  which in boolean of course is turning to False  so it was breaking there   In chrome the biggest issue was that just giving it  focus   wasn t enough  it kept selecting ALL of the text   Hence  we set the value of itself  to itself el value   el value  before calling our function  and now it has a grasp  amp  position with the input to use selectionStart   function setCaretPosition elemId  caretPos        var el   document getElementById elemId        el value   el value           this is used to not only get  focus   but        to make sure we don t have it everything -selected-         it causes an issue in chrome  and having it doesn t hurt any other browser       if  el     null             if  el createTextRange                var range   el createTextRange                range move  character   caretPos               range select                return true                     else                   el selectionStart     0 added for Firefox bug              if  el selectionStart    el selectionStart     0                    el focus                    el setSelectionRange caretPos  caretPos                   return true                             else       fail city  fortunately this never happens  as far as I ve tested                     el focus                    return false

User · Answer

I found an easy way to fix this issue  tested in IE and Chrome   function setCaret elemId  caret        var elem   document getElementById elemId      elem setSelectionRange caret  caret        Pass text box id and caret position to this function

User · Answer

I ve adjusted the answer of kd7 a little bit because elem selectionStart will evaluate to false when the selectionStart is incidentally 0   function setCaretPosition elem  caretPos        var range       if  elem createTextRange            range   elem createTextRange            range move  character   caretPos           range select          else           elem focus            if  elem selectionStart     undefined                elem setSelectionRange caretPos  caretPos

User · Answer

Since I actually really needed this solution  and the typical baseline solution  focus the input - then set the value equal to itself  doesn t work cross-browser  I spent some time tweaking and editing everything to get it working  Building upon  kd7 s code here s what I ve come up with   Enjoy  Works in IE6   Firefox  Chrome  Safari  Opera  Cross-browser caret positioning technique  example  moving the cursor to the END         USEAGE     returns a boolean true false if it worked or not     Parameters   Id of element  caretPosition you want   setCaretPosition  IDHERE   10      example   The meat and potatoes is basically  kd7 s setCaretPosition  with the biggest tweak being if  el selectionStart    el selectionStart     0   in firefox the selectionStart is starting at 0  which in boolean of course is turning to False  so it was breaking there   In chrome the biggest issue was that just giving it  focus   wasn t enough  it kept selecting ALL of the text   Hence  we set the value of itself  to itself el value   el value  before calling our function  and now it has a grasp  amp  position with the input to use selectionStart   function setCaretPosition elemId  caretPos        var el   document getElementById elemId        el value   el value           this is used to not only get  focus   but        to make sure we don t have it everything -selected-         it causes an issue in chrome  and having it doesn t hurt any other browser       if  el     null             if  el createTextRange                var range   el createTextRange                range move  character   caretPos               range select                return true                     else                   el selectionStart     0 added for Firefox bug              if  el selectionStart    el selectionStart     0                    el focus                    el setSelectionRange caretPos  caretPos                   return true                             else       fail city  fortunately this never happens  as far as I ve tested                     el focus                    return false

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt set caret position lt  title gt   lt script type  application javascript  gt     lt   CDATA  window onload   function       setCaret document getElementById  input1    13  13     function setCaret el  st  end     if  el setSelectionRange       el focus      el setSelectionRange st  end       else      if  el createTextRange         range   el createTextRange       range collapse true      range moveEnd  character   end      range moveStart  character   st      range select                  gt   lt  script gt   lt  head gt   lt body gt    lt textarea id  input1  name  input1  rows  10  cols  30  gt Happy kittens dancing lt  textarea gt    lt p gt  amp nbsp  lt  p gt    lt  body gt   lt  html gt

[javascript] Set keyboard caret position in html textbox

Examples related to javascript

Examples related to textbox

Examples related to input