Use JavaScript to place cursor at end of text in text input element

Question

What is the best way  and I presume simplest way  to place the cursor at the end of the text in a input text element via JavaScript - after focus has been set to the element

User · Answer

If you set the value first and then set the focus, the cursor will always appear at the end.

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Here is the fiddle to test https://jsfiddle.net/5on50caf/1/

User · Answer

input      input     input focus   val input val          if  input val     input attr  value   input val   substr 0 input val   length-1

User · Answer

Try this  it has worked for me     input is the input element  input focus      sets focus to element var val   this input value    store the value of the element this input value         clear the value of the element this input value   val    set that value back      For the cursor to be move to the end  the input has to have focus first  then when the value is changed it will goto the end   If you set  value to the same  it won t change in chrome

User · Answer

Simple  When editing or changing values  first put the focus then set value       catg name   focus        catg name   val catg name

User · Answer

x000D   x000D  document querySelector  input   addEventListener  focus   e   gt      const   value     e target    e target setSelectionRange value length  value length       x000D   lt input value  my text    gt  x000D   x000D   x000D

User · Answer

It s 2019 and none of the methods above worked for me  but this one did  taken from https   css-tricks com snippets javascript move-cursor-to-end-of-input    x000D   x000D  function moveCursorToEnd id    x000D    var el   document getElementById id   x000D    el focus   x000D    if  typeof el selectionStart     number     x000D        el selectionStart   el selectionEnd   el value length  x000D      else if  typeof el createTextRange     undefined                x000D        var range   el createTextRange    x000D        range collapse false   x000D        range select    x000D      x000D    x000D   lt input id  myinput  type  text    gt  x000D   lt a href     onclick  moveCursorToEnd  myinput    gt Move cursor to end lt  a gt  x000D   x000D   x000D

User · Answer

lt script type  text javascript  gt        function SetEnd txt            if  txt createTextRange               IE          var FieldRange   txt createTextRange             FieldRange moveStart  character   txt value length            FieldRange collapse             FieldRange select                       else              Firefox and Opera          txt focus             var length   txt value length           txt setSelectionRange length  length                         lt  script gt      This function works for me in IE9  Firefox 6 x  and Opera 11 x

User · Answer

el setSelectionRange -1  -1    https   codesandbox io s peaceful-bash-x2mti     This method updates the HTMLInputElement selectionStart  selectionEnd    and selectionDirection properties in one call    https   developer mozilla org en-US docs Web API HTMLInputElement setSelectionRange  In other js methods -1 usually means  to the  last character  This is the case for this one too  but I couldn t find explicit mention of this behavior in the docs

User · Answer

While this may be an old question with lots of answers  I ran across a similar issue and none of the answers were quite what I wanted and or were poorly explained  The issue with selectionStart and selectionEnd properties is that they don t exist for input type number  while the question was asked for text type  I reckon it might help others who might have other input types that they need to focus   So if you don t know whether the input type the function will focus is a type number or not  you cannot use that solution   The solution that works cross browser and for all input types is rather simple    get and store the value of input in a variable focus the input set the value of input to the stored value   That way the cursor is at the end of the input element   So all you d do is something like this  using jquery  provided the element selector that one wishes to focus is accessible via  data-focus-element  data attribute of the clicked element and the function executes after clicking on   foo  element        foo   click function         element selector     this  attr  data-focus-element         focus     element selector       value    focus val         focus focus         focus val value         Why does this work  Simply  when the  focus   is called  the focus will be added to the beginning of the input element  which is the core problem here   ignoring the fact  that the input element already has a value in it  However  when the value of an input is changed  the cursor is automatically placed at the end of the value inside input element  So if you override the value with the same value that had been previously entered in the input  the value will look untouched  the cursor will  however  move to the end

User · Answer

lt script type  text javascript  gt        function SetEnd txt            if  txt createTextRange               IE          var FieldRange   txt createTextRange             FieldRange moveStart  character   txt value length            FieldRange collapse             FieldRange select                       else              Firefox and Opera          txt focus             var length   txt value length           txt setSelectionRange length  length                         lt  script gt      This function works for me in IE9  Firefox 6 x  and Opera 11 x

User · Answer

I just found that in iOS  setting textarea textContent property will place the cursor at the end of the text in the textarea element every time  The behavior was a bug in my app  but seems to be something that you could use intentionally

User · Answer

Notice focus   is at the end  this is for textarea long text compatability  const end   input value length input setSelectionRange end  end  input focus

User · Answer

I tried the suggestions before but none worked for me  tested them in Chrome   so I wrote my own code - and it works fine in Firefox  IE  Safari  Chrome     In Textarea   onfocus     sendCursorToEnd this     In Javascript   function sendCursorToEnd obj     var value   obj value    store the value of the element var message       if  value              message   value     n        obj  focus   val message

User · Answer

var valsrch       search   val        search   val     focus   val valsrch

User · Answer

Well  I just use       myElement   val     myElement   val

User · Answer

Notice focus   is at the end  this is for textarea long text compatability  const end   input value length input setSelectionRange end  end  input focus

User · Answer

While this may be an old question with lots of answers  I ran across a similar issue and none of the answers were quite what I wanted and or were poorly explained  The issue with selectionStart and selectionEnd properties is that they don t exist for input type number  while the question was asked for text type  I reckon it might help others who might have other input types that they need to focus   So if you don t know whether the input type the function will focus is a type number or not  you cannot use that solution   The solution that works cross browser and for all input types is rather simple    get and store the value of input in a variable focus the input set the value of input to the stored value   That way the cursor is at the end of the input element   So all you d do is something like this  using jquery  provided the element selector that one wishes to focus is accessible via  data-focus-element  data attribute of the clicked element and the function executes after clicking on   foo  element        foo   click function         element selector     this  attr  data-focus-element         focus     element selector       value    focus val         focus focus         focus val value         Why does this work  Simply  when the  focus   is called  the focus will be added to the beginning of the input element  which is the core problem here   ignoring the fact  that the input element already has a value in it  However  when the value of an input is changed  the cursor is automatically placed at the end of the value inside input element  So if you override the value with the same value that had been previously entered in the input  the value will look untouched  the cursor will  however  move to the end

User · Answer

I wanted to put cursor at the end of a  div  element where contenteditable   true  and I got a solution with Xeoncross code    lt input type  button  value  Paste HTML  onclick  document getElementById  test   focus    pasteHtmlAtCaret   lt b gt INSERTED lt  b gt       gt    lt div id  test  contenteditable  true  gt      Here is some nice text  lt  div gt    And this function do magic    function pasteHtmlAtCaret html        var sel  range      if  window getSelection               IE9 and non-IE         sel   window getSelection            if  sel getRangeAt  amp  amp  sel rangeCount                range   sel getRangeAt 0               range deleteContents                    Range createContextualFragment   would be useful here but is                non-standard and not supported in all browsers  IE9  for one              var el   document createElement  div                el innerHTML   html              var frag   document createDocumentFragment    node  lastNode              while    node   el firstChild                      lastNode   frag appendChild node                             range insertNode frag                   Preserve the selection             if  lastNode                    range   range cloneRange                    range setStartAfter lastNode                   range collapse true                   sel removeAllRanges                    sel addRange range                                 else if  document selection  amp  amp  document selection type     Control                IE  lt  9         document selection createRange   pasteHTML html             Works fine for most browsers  please check it  this code puts text and put focus at the end of the text in div element  not input element   https   jsfiddle net Xeoncross 4tUDk   Thanks  Xeoncross

User · Answer

I tried the suggestions before but none worked for me  tested them in Chrome   so I wrote my own code - and it works fine in Firefox  IE  Safari  Chrome     In Textarea   onfocus     sendCursorToEnd this     In Javascript   function sendCursorToEnd obj     var value   obj value    store the value of the element var message       if  value              message   value     n        obj  focus   val message

User · Answer

I like the accepted answer a lot  but it stopped working in Chrome  In Chrome  for the cursor to go to the end  input value needs to change  The solution is as follow    lt input id  search  type  text  value  mycurrtext  size  30      onfocus  var value   this value  this value   null  this value   value   name  search   gt

User · Answer

Taking some of the answers    making a single-line jquery       search   focus   val     search   val

User · Answer

I just found that in iOS  setting textarea textContent property will place the cursor at the end of the text in the textarea element every time  The behavior was a bug in my app  but seems to be something that you could use intentionally

User · Answer

Still the intermediate variable is needed   see var val   else the cursor behaves strange  we need it at the end    lt body onload  document getElementById  userinput   focus     gt   lt form gt   lt input id  userinput  onfocus  var val this value  this value     this value  val            class large type  text  size  10  maxlength  50  value  beans  name  myinput  gt   lt  form gt   lt  body gt

User · Answer

Set the cursor when click on text area to the end of text    Variation  of this code is   ALSO works  for  Firefox  IE  Safari  Chrome    In server-side code   txtAddNoteMessage Attributes Add  onClick    sendCursorToEnd     amp  txtAddNoteMessage ClientID  amp           In Javascript   function sendCursorToEnd obj        var value      obj  val      store the value of the element     var message           if  value                  message   value     n                 obj  focus   val message         obj  unbind

User · Answer

If the input field just needs a static default value I usually do this with jQuery       input   focus   val  Default value      This seems to work in all browsers

User · Answer

If the input field just needs a static default value I usually do this with jQuery       input   focus   val  Default value      This seems to work in all browsers

User · Answer

x000D   x000D  document querySelector  input   addEventListener  focus   e   gt      const   value     e target    e target setSelectionRange value length  value length       x000D   lt input value  my text    gt  x000D   x000D   x000D

User · Answer

I wanted to put cursor at the end of a  div  element where contenteditable   true  and I got a solution with Xeoncross code    lt input type  button  value  Paste HTML  onclick  document getElementById  test   focus    pasteHtmlAtCaret   lt b gt INSERTED lt  b gt       gt    lt div id  test  contenteditable  true  gt      Here is some nice text  lt  div gt    And this function do magic    function pasteHtmlAtCaret html        var sel  range      if  window getSelection               IE9 and non-IE         sel   window getSelection            if  sel getRangeAt  amp  amp  sel rangeCount                range   sel getRangeAt 0               range deleteContents                    Range createContextualFragment   would be useful here but is                non-standard and not supported in all browsers  IE9  for one              var el   document createElement  div                el innerHTML   html              var frag   document createDocumentFragment    node  lastNode              while    node   el firstChild                      lastNode   frag appendChild node                             range insertNode frag                   Preserve the selection             if  lastNode                    range   range cloneRange                    range setStartAfter lastNode                   range collapse true                   sel removeAllRanges                    sel addRange range                                 else if  document selection  amp  amp  document selection type     Control                IE  lt  9         document selection createRange   pasteHTML html             Works fine for most browsers  please check it  this code puts text and put focus at the end of the text in div element  not input element   https   jsfiddle net Xeoncross 4tUDk   Thanks  Xeoncross

User · Answer

el setSelectionRange -1  -1    https   codesandbox io s peaceful-bash-x2mti     This method updates the HTMLInputElement selectionStart  selectionEnd    and selectionDirection properties in one call    https   developer mozilla org en-US docs Web API HTMLInputElement setSelectionRange  In other js methods -1 usually means  to the  last character  This is the case for this one too  but I couldn t find explicit mention of this behavior in the docs

User · Answer

Check this solution    x000D   x000D    fn setCurPosition x000D    fn setCurPosition   function pos    x000D      this focus    x000D      this each function index  elem    x000D          if  elem setSelectionRange    x000D              elem setSelectionRange pos  pos   x000D            else if  elem createTextRange    x000D              var range   elem createTextRange    x000D              range collapse true   x000D              range moveEnd  character   pos   x000D              range moveStart  character   pos   x000D              range select    x000D            x000D          x000D      return this  x000D     x000D   x000D     USAGE - Set Cursor ends x000D      str1   setCurPosition     str1   val   length   x000D   x000D     USAGE - Set Cursor at 7 position x000D         str2   setCurPosition 7   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt p gt Set cursor at any position lt  p gt  x000D   lt p gt  lt input type  text  id  str1  value  my string here    gt  lt  p gt  x000D   lt p gt  lt input type  text  id  str2  value  my string here    gt  lt  p gt  x000D   x000D   x000D

User · Answer

Try the following code      input   focus function            this  val   this  val        focus

User · Answer

Super easy  you may have to focus on the input element   inputEl   getElementById  inputId    var temp   inputEl value  inputEl value       inputEl value   temp

User · Answer

Well  I just use       myElement   val     myElement   val

User · Answer

input      input     input focus   val input val          if  input val     input attr  value   input val   substr 0 input val   length-1

User · Answer

I ve tried the following with quite great success in chrome     input focus   focus function          var val   this value           this     this        this val           setTimeout function               this val val          1         Quick rundown   It takes every input field with the class focus on it  then stores the old value of the input field in a variable  afterwards it applies the empty string to the input field   Then it waits 1 milisecond and puts in the old value again

User · Answer

Try the following code      input   focus function            this  val   this  val        focus

User · Answer

This problem is interesting  The most confusing thing about it is that no solution I found solved the problem completely           SOLUTION           You need a JS function  like this   function moveCursorToEnd obj       if    obj updating         obj updating   true      var oldValue   obj value      obj value           setTimeout function    obj value   oldValue  obj updating   false     100           You need to call this guy in the onfocus and onclick events    lt input type  text  value  Test Field  onfocus  moveCursorToEnd this   onclick  moveCursorToEnd this   gt     IT WORKS ON ALL DEVICES AN BROWSERS

User · Answer

It s 2019 and none of the methods above worked for me  but this one did  taken from https   css-tricks com snippets javascript move-cursor-to-end-of-input    x000D   x000D  function moveCursorToEnd id    x000D    var el   document getElementById id   x000D    el focus   x000D    if  typeof el selectionStart     number     x000D        el selectionStart   el selectionEnd   el value length  x000D      else if  typeof el createTextRange     undefined                x000D        var range   el createTextRange    x000D        range collapse false   x000D        range select    x000D      x000D    x000D   lt input id  myinput  type  text    gt  x000D   lt a href     onclick  moveCursorToEnd  myinput    gt Move cursor to end lt  a gt  x000D   x000D   x000D

User · Answer

I like the accepted answer a lot  but it stopped working in Chrome  In Chrome  for the cursor to go to the end  input value needs to change  The solution is as follow    lt input id  search  type  text  value  mycurrtext  size  30      onfocus  var value   this value  this value   null  this value   value   name  search   gt

User · Answer

In jQuery  that s      document  ready function           input   focus function            this  attr  value    this  attr  value

User · Answer

I also faced same problem  Finally this gonna work for me   jQuery fn putCursorAtEnd      function        return this each function             Cache references     var  el     this           el   this          Only focus if input isn t already     if    el is   focus            el focus                  If this function exists     IE 9       if  el setSelectionRange              Double the length because Opera is inconsistent about whether a carriage return is one character or two        var len    el val   length   2            Timeout seems to be required for Blink       setTimeout function             el setSelectionRange len  len            1          else             As a fallback  replace the contents with itself          Doesn t work in Chrome  but Chrome supports setSelectionRange        el val  el val                    Scroll to the bottom  in case we re in a tall textarea         Necessary for Firefox and Chrome      this scrollTop   999999               This is how we can call this   var searchInput       searchInputOrTextarea     searchInput    putCursorAtEnd      should be chainable    on  focus   function        could be on any event     searchInput putCursorAtEnd           It s works for me in safari  IE  Chrome  Mozilla  On mobile devices I didn t tried this

User · Answer

Try this  it has worked for me     input is the input element  input focus      sets focus to element var val   this input value    store the value of the element this input value         clear the value of the element this input value   val    set that value back      For the cursor to be move to the end  the input has to have focus first  then when the value is changed it will goto the end   If you set  value to the same  it won t change in chrome

User · Answer

Taking some of the answers    making a single-line jquery       search   focus   val     search   val

User · Answer

Still the intermediate variable is needed   see var val   else the cursor behaves strange  we need it at the end    lt body onload  document getElementById  userinput   focus     gt   lt form gt   lt input id  userinput  onfocus  var val this value  this value     this value  val            class large type  text  size  10  maxlength  50  value  beans  name  myinput  gt   lt  form gt   lt  body gt

User · Answer

After hacking around with this a bit  I found the best way was to use the setSelectionRange function if the browser supports it  if not  revert to using the method in Mike Berrow s answer  i e  replace the value with itself    I m also setting scrollTop to a high value in case we re in a vertically-scrollable textarea   Using an arbitrary high value seems more reliable than   this  height   in Firefox and Chrome    I ve made it is as a jQuery plugin   If you re not using jQuery I trust you can still get the gist easily enough    I ve tested in IE6  IE7  IE8  Firefox 3 5 5  Google Chrome 3 0  Safari 4 0 4  Opera 10 00   It s available on jquery com as the PutCursorAtEnd plugin  For your convenience  the code for release 1 0 is as follows      jQuery plugin  PutCursorAtEnd 1 0    http   plugins jquery com project PutCursorAtEnd    by teedyay       Puts the cursor at the end of a textbox  textarea     codesnippet  691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4  function          jQuery fn putCursorAtEnd   function             return this each function                   this  focus               If this function exists            if  this setSelectionRange                           then use it             Doesn t work in IE              Double the length because Opera is inconsistent about whether a carriage return is one character or two  Sigh          var len     this  val   length   2          this setSelectionRange len  len                     else                          otherwise replace the contents with itself             Doesn t work in Google Chrome            this  val   this  val                           Scroll to the bottom  in case we re in a tall textarea             Necessary for Firefox and Google Chrome          this scrollTop   999999                    jQuery

User · Answer

Check this solution    x000D   x000D    fn setCurPosition x000D    fn setCurPosition   function pos    x000D      this focus    x000D      this each function index  elem    x000D          if  elem setSelectionRange    x000D              elem setSelectionRange pos  pos   x000D            else if  elem createTextRange    x000D              var range   elem createTextRange    x000D              range collapse true   x000D              range moveEnd  character   pos   x000D              range moveStart  character   pos   x000D              range select    x000D            x000D          x000D      return this  x000D     x000D   x000D     USAGE - Set Cursor ends x000D      str1   setCurPosition     str1   val   length   x000D   x000D     USAGE - Set Cursor at 7 position x000D         str2   setCurPosition 7   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt p gt Set cursor at any position lt  p gt  x000D   lt p gt  lt input type  text  id  str1  value  my string here    gt  lt  p gt  x000D   lt p gt  lt input type  text  id  str2  value  my string here    gt  lt  p gt  x000D   x000D   x000D

User · Answer

Try this one works with Vanilla JavaScript     lt input type  text  id  yourId  onfocus   let value   this value  this value   null  this value value  name  nameYouWant  class  yourClass  value  yourValue  placeholder  yourPlaceholder     gt    In Js  document getElementById  yourId   focus

User · Answer

var valsrch       search   val        search   val     focus   val valsrch

User · Answer

Set the cursor when click on text area to the end of text    Variation  of this code is   ALSO works  for  Firefox  IE  Safari  Chrome    In server-side code   txtAddNoteMessage Attributes Add  onClick    sendCursorToEnd     amp  txtAddNoteMessage ClientID  amp           In Javascript   function sendCursorToEnd obj        var value      obj  val      store the value of the element     var message           if  value                  message   value     n                 obj  focus   val message         obj  unbind

User · Answer

I faced this same issue  after setting focus through RJS prototype  in IE  Firefox was already leaving the cursor at the end when there is already a value for the field  IE was forcing the cursor to the beginning of the text   The solution I arrived at is as follows    lt input id  search  type  text  value  mycurrtext  size  30          onfocus  this value   this value   name  search   gt    This works in both IE7 and FF3

User · Answer

There s a simple way to get it working in most browsers   this selectionStart   this selectionEnd   this value length    However  due to the  quirks of a few browsers  a more inclusive answer looks more like this  setTimeout function    that selectionStart   that selectionEnd   10000     0     Using jQuery  to set the listener  but it s not necessary otherwise    x000D   x000D      el   focus function    x000D    var that   this  x000D    setTimeout function    that selectionStart   that selectionEnd   10000     0   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  el  type  text  value  put cursor at end  gt  x000D   x000D   x000D      Using Vanilla JS   borrowing addEvent function from this answer    x000D   x000D     Basic cross browser addEvent x000D  function addEvent elem  event  fn   x000D  if elem addEventListener   x000D    elem addEventListener event  fn  false   x000D   else  x000D    elem attachEvent  on    event  x000D    function    return fn call elem  window event        x000D     x000D  var element   document getElementById  el    x000D   x000D  addEvent element  focus  function    x000D    var that   this  x000D    setTimeout function    that selectionStart   that selectionEnd   10000     0   x000D      x000D   lt input id  el  type  text  value  put cursor at end  gt  x000D   x000D   x000D      Quirks  Chrome has an odd quirk where the focus event fires before the cursor is moved into the field  which screws my simple solution up   Two options to fix this    You can add a timeout of 0 ms  to defer the operation until the stack is clear  You can change the event from focus to mouseup  This would be pretty annoying for the user unless you still kept track of focus  I m not really in love with either of these options    Also   vladkras pointed out that some older versions of Opera incorrectly calculate the length when it has spaces  For this you can use a huge number that should be larger than your string

User · Answer

In jQuery  that s      document  ready function           input   focus function            this  attr  value    this  attr  value

User · Answer

This problem is interesting  The most confusing thing about it is that no solution I found solved the problem completely           SOLUTION           You need a JS function  like this   function moveCursorToEnd obj       if    obj updating         obj updating   true      var oldValue   obj value      obj value           setTimeout function    obj value   oldValue  obj updating   false     100           You need to call this guy in the onfocus and onclick events    lt input type  text  value  Test Field  onfocus  moveCursorToEnd this   onclick  moveCursorToEnd this   gt     IT WORKS ON ALL DEVICES AN BROWSERS

User · Answer

Though I m answering too late  but for future query  it will be helpful  And it also work in contenteditable div   From where you need to set focus at end  write this code-  var el   document getElementById  your element id    placeCaretAtEnd el     And the function is -   function placeCaretAtEnd el        el focus        if  typeof window getSelection     undefined               amp  amp  typeof document createRange     undefined             var range   document createRange            range selectNodeContents el           range collapse false           var sel   window getSelection            sel removeAllRanges            sel addRange range         else if  typeof document body createTextRange     undefined             var textRange   document body createTextRange            textRange moveToElementText el           textRange collapse false           textRange select

User · Answer

I faced this same issue  after setting focus through RJS prototype  in IE  Firefox was already leaving the cursor at the end when there is already a value for the field  IE was forcing the cursor to the beginning of the text   The solution I arrived at is as follows    lt input id  search  type  text  value  mycurrtext  size  30          onfocus  this value   this value   name  search   gt    This works in both IE7 and FF3

User · Answer

There s a simple way to get it working in most browsers   this selectionStart   this selectionEnd   this value length    However  due to the  quirks of a few browsers  a more inclusive answer looks more like this  setTimeout function    that selectionStart   that selectionEnd   10000     0     Using jQuery  to set the listener  but it s not necessary otherwise    x000D   x000D      el   focus function    x000D    var that   this  x000D    setTimeout function    that selectionStart   that selectionEnd   10000     0   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  el  type  text  value  put cursor at end  gt  x000D   x000D   x000D      Using Vanilla JS   borrowing addEvent function from this answer    x000D   x000D     Basic cross browser addEvent x000D  function addEvent elem  event  fn   x000D  if elem addEventListener   x000D    elem addEventListener event  fn  false   x000D   else  x000D    elem attachEvent  on    event  x000D    function    return fn call elem  window event        x000D     x000D  var element   document getElementById  el    x000D   x000D  addEvent element  focus  function    x000D    var that   this  x000D    setTimeout function    that selectionStart   that selectionEnd   10000     0   x000D      x000D   lt input id  el  type  text  value  put cursor at end  gt  x000D   x000D   x000D      Quirks  Chrome has an odd quirk where the focus event fires before the cursor is moved into the field  which screws my simple solution up   Two options to fix this    You can add a timeout of 0 ms  to defer the operation until the stack is clear  You can change the event from focus to mouseup  This would be pretty annoying for the user unless you still kept track of focus  I m not really in love with either of these options    Also   vladkras pointed out that some older versions of Opera incorrectly calculate the length when it has spaces  For this you can use a huge number that should be larger than your string

User · Answer

Super easy  you may have to focus on the input element   inputEl   getElementById  inputId    var temp   inputEl value  inputEl value       inputEl value   temp

User · Answer

I ve tried the following with quite great success in chrome     input focus   focus function          var val   this value           this     this        this val           setTimeout function               this val val          1         Quick rundown   It takes every input field with the class focus on it  then stores the old value of the input field in a variable  afterwards it applies the empty string to the input field   Then it waits 1 milisecond and puts in the old value again

User · Answer

For all browsers for all cases   function moveCursorToEnd el        window setTimeout function                  if  typeof el selectionStart     number                 el selectionStart   el selectionEnd   el value length            else if  typeof el createTextRange     undefined                 var range   el createTextRange                range collapse false               range select                     1       Timeout required if you need to move cursor from onFocus event handler

User · Answer

Simple  When editing or changing values  first put the focus then set value       catg name   focus        catg name   val catg name

User · Answer

Here   s a jsFiddle demo of my answer  The demo uses CoffeeScript  but you can convert it to plain JavaScript if you need to   The important part  in JavaScript   var endIndex   textField value length  if  textField setSelectionRange       textField setSelectionRange endIndex  endIndex       I   m posting this answer because I already wrote it for someone else who had the same question  This answer doesn   t cover as many edge cases as the top answers here  but it works for me  and has a jsFiddle demo you can play with   Here is the code from the jsFiddle  so this answer is preserved even if the jsFiddle disappears   moveCursorToEnd    textField  - gt    endIndex   textField value length   if textField setSelectionRange     textField setSelectionRange endIndex  endIndex   jQuery - gt        that-field   on  click   - gt      moveCursorToEnd this     lt div class  field  gt       lt label for  pressure  gt Blood pressure lt  label gt        lt input class  that-field  type  text  name  pressure  id  pressure  value  24  gt   lt  div gt   lt p gt      Try clicking in the text field  The cursor will always jump to the end   lt  p gt    body       margin  1em      field       margin-bottom  1em

User · Answer

Here   s a jsFiddle demo of my answer  The demo uses CoffeeScript  but you can convert it to plain JavaScript if you need to   The important part  in JavaScript   var endIndex   textField value length  if  textField setSelectionRange       textField setSelectionRange endIndex  endIndex       I   m posting this answer because I already wrote it for someone else who had the same question  This answer doesn   t cover as many edge cases as the top answers here  but it works for me  and has a jsFiddle demo you can play with   Here is the code from the jsFiddle  so this answer is preserved even if the jsFiddle disappears   moveCursorToEnd    textField  - gt    endIndex   textField value length   if textField setSelectionRange     textField setSelectionRange endIndex  endIndex   jQuery - gt        that-field   on  click   - gt      moveCursorToEnd this     lt div class  field  gt       lt label for  pressure  gt Blood pressure lt  label gt        lt input class  that-field  type  text  name  pressure  id  pressure  value  24  gt   lt  div gt   lt p gt      Try clicking in the text field  The cursor will always jump to the end   lt  p gt    body       margin  1em      field       margin-bottom  1em

User · Answer

If you set the value first and then set the focus, the cursor will always appear at the end.

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Here is the fiddle to test https://jsfiddle.net/5on50caf/1/

User · Answer

Though I m answering too late  but for future query  it will be helpful  And it also work in contenteditable div   From where you need to set focus at end  write this code-  var el   document getElementById  your element id    placeCaretAtEnd el     And the function is -   function placeCaretAtEnd el        el focus        if  typeof window getSelection     undefined               amp  amp  typeof document createRange     undefined             var range   document createRange            range selectNodeContents el           range collapse false           var sel   window getSelection            sel removeAllRanges            sel addRange range         else if  typeof document body createTextRange     undefined             var textRange   document body createTextRange            textRange moveToElementText el           textRange collapse false           textRange select

User · Answer

Try this one works with Vanilla JavaScript     lt input type  text  id  yourId  onfocus   let value   this value  this value   null  this value value  name  nameYouWant  class  yourClass  value  yourValue  placeholder  yourPlaceholder     gt    In Js  document getElementById  yourId   focus

User · Answer

For all browsers for all cases   function moveCursorToEnd el        window setTimeout function                  if  typeof el selectionStart     number                 el selectionStart   el selectionEnd   el value length            else if  typeof el createTextRange     undefined                 var range   el createTextRange                range collapse false               range select                     1       Timeout required if you need to move cursor from onFocus event handler

User · Answer

After hacking around with this a bit  I found the best way was to use the setSelectionRange function if the browser supports it  if not  revert to using the method in Mike Berrow s answer  i e  replace the value with itself    I m also setting scrollTop to a high value in case we re in a vertically-scrollable textarea   Using an arbitrary high value seems more reliable than   this  height   in Firefox and Chrome    I ve made it is as a jQuery plugin   If you re not using jQuery I trust you can still get the gist easily enough    I ve tested in IE6  IE7  IE8  Firefox 3 5 5  Google Chrome 3 0  Safari 4 0 4  Opera 10 00   It s available on jquery com as the PutCursorAtEnd plugin  For your convenience  the code for release 1 0 is as follows      jQuery plugin  PutCursorAtEnd 1 0    http   plugins jquery com project PutCursorAtEnd    by teedyay       Puts the cursor at the end of a textbox  textarea     codesnippet  691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4  function          jQuery fn putCursorAtEnd   function             return this each function                   this  focus               If this function exists            if  this setSelectionRange                           then use it             Doesn t work in IE              Double the length because Opera is inconsistent about whether a carriage return is one character or two  Sigh          var len     this  val   length   2          this setSelectionRange len  len                     else                          otherwise replace the contents with itself             Doesn t work in Google Chrome            this  val   this  val                           Scroll to the bottom  in case we re in a tall textarea             Necessary for Firefox and Google Chrome          this scrollTop   999999                    jQuery

User · Answer

I also faced same problem  Finally this gonna work for me   jQuery fn putCursorAtEnd      function        return this each function             Cache references     var  el     this           el   this          Only focus if input isn t already     if    el is   focus            el focus                  If this function exists     IE 9       if  el setSelectionRange              Double the length because Opera is inconsistent about whether a carriage return is one character or two        var len    el val   length   2            Timeout seems to be required for Blink       setTimeout function             el setSelectionRange len  len            1          else             As a fallback  replace the contents with itself          Doesn t work in Chrome  but Chrome supports setSelectionRange        el val  el val                    Scroll to the bottom  in case we re in a tall textarea         Necessary for Firefox and Chrome      this scrollTop   999999               This is how we can call this   var searchInput       searchInputOrTextarea     searchInput    putCursorAtEnd      should be chainable    on  focus   function        could be on any event     searchInput putCursorAtEnd           It s works for me in safari  IE  Chrome  Mozilla  On mobile devices I didn t tried this

[javascript] Use JavaScript to place cursor at end of text in text input element

Examples related to javascript