Set mouse focus and move cursor to end of input using jQuery

Question

This question has been asked in a few different formats but I can t get any of the answers to work in my scenario   I am using jQuery to implement command history when user hits up down arrows  When up arrow is hit  I replace the input value with previous command and set focus on the input field  but want the cursor always to be positioned at the end of the input string   My code  as is     document  keydown function e      var key     e charCode   e charCode   e keyCode   e keyCode   0    var input   self shell find  input current last       switch key        case 38     up       lastQuery   self queries self historyCounter-1         self historyCounter--        input val lastQuery  focus       and it continues on from there   How can I force the cursor to be placed at the end of  input  after focus

User · Answer

Looks like clearing the value after focusing and then resetting works   input focus    var tmpStr   input val    input val      input val tmpStr

User · Answer

function focusCampo id           var inputField   document getElementById id           if  inputField    null  amp  amp  inputField value length    0               if  inputField createTextRange                   var FieldRange   inputField createTextRange                    FieldRange moveStart  character  inputField value length                   FieldRange collapse                    FieldRange select                 else if  inputField selectionStart    inputField selectionStart     0                     var elemLen   inputField value length                  inputField selectionStart   elemLen                  inputField selectionEnd   elemLen                  inputField focus                           else              inputField focus                         urlCompany   focus focusCampo  urlCompany       works for all ie browsers

User · Answer

like other said  clear and fill worked for me       var elem       input field        var val   elem val        elem focus   val     val val

User · Answer

At the first you have to set focus on selected textbox object and next you set the value       inputID   focus        inputID   val  someValue

User · Answer

The answer from scorpion9 works  Just to make it more clear see my code below    lt script src    js jquery js  gt  lt  script gt    lt script type  text javascript  gt        function              var input       SomeId            input focus            var tmpStr   input val            input val              input val tmpStr            lt  script gt

User · Answer

Hope this help you   var fieldInput       fieldName    var fldLength  fieldInput val   length  fieldInput focus    fieldInput 0  setSelectionRange fldLength  fldLength

User · Answer

2 artlung s answer  It works with second line only in my code  IE7  IE8  Jquery v1 6    var input       some elem    input focus   val input val       Addition  if input element was added to DOM using JQuery  a focus is not set in IE  I used a little trick   input blur   focus   val input val

User · Answer

set the value first  then set the focus  when it focuses  it will use the value that exists at the time of focus  so your value must be set first   this logic works for me with an application that populates an  lt input gt  with the value of a clicked  lt button gt   val   is set first  then focus       button   on  click     function        var value     this  attr  value           input name item1    val value          input name item1    focus

User · Answer

It will focus with mouse point       TextBox   focus

User · Answer

What about in one single line         txtSample   focus   val     txtSample   val       This line works for me

User · Answer

I know this answer comes late  but I can see people havent found an answer  To prevent the up key to put the cursor at the start  just return false from the method handling the event  This stops the event chain that leads to the cursor movement  Pasting revised code from the OP below     document  keydown function e      var key     e charCode   e charCode   e keyCode   e keyCode   0    var input   self shell find  input current last       switch key        case 38     up       lastQuery   self queries self historyCounter-1         self historyCounter--        input val lastQuery  focus             HERE IS THE FIX        return false      and it continues on from there

User · Answer

Chris Coyier has a mini jQuery plugin for this which works perfectly well  http   css-tricks com snippets jquery move-cursor-to-end-of-textarea-or-input   It uses setSelectionRange if supported  else has a solid fallback   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             Then you can just do   input putCursorAtEnd

User · Answer

It will be different for different browsers   This works in ff       var t      INPUT        var l     INPUT   val   length        t  focus         var r       INPUT   get 0  createTextRange        r moveStart  character   l        r moveEnd  character   l             r select      More details are in these articles here at SitePoint  AspAlliance

User · Answer

I use code below and it works fine  function to end el                var len   el value length    0              if  len                    if   setSelectionRange  in el  el setSelectionRange len  len                   else if   createTextRange  in el      for IE                     var range   el createTextRange                        range moveStart  character   len                       range select

User · Answer

It looks a little odd  even silly  but this is working for me   input val lastQuery   input focus   val input val       Now  I m not certain I ve replicated your setup  I m assuming input is an  lt input gt  element   By re-setting the value  to itself  I think the cursor is getting put at the end of the input  Tested in Firefox 3 and MSIE7

User · Answer

function CurFocus             txtEmail   focus        function pageLoad        setTimeout CurFocus   3000      window onload   pageLoad

User · Answer

Here is another one  a one liner which does not reassign the value       inp   focus   0  setSelectionRange 99999  99999

User · Answer

Ref   will824 Comment  This solution worked for me with no compatibility issues  Rest of solutions failed in IE9   var input       inputID    var tmp   input val    input focus   val     blur   focus   val tmp     Tested and found working in   Firefox 33 Chrome 34 Safari 5 1 7 IE 9

User · Answer

I have found the same thing as suggested above by a few folks   If you focus   first  then push the val   into the input  the cursor will get positioned to the end of the input value in Firefox Chrome and IE  If you push the val   into the input field first  Firefox and Chrome position the cursor at the end  but IE positions it to the front when you focus        element identifier   focus   val  some value      should do the trick  it always has for me anyway

[javascript] Set mouse focus and move cursor to end of input using jQuery

Examples related to javascript

Examples related to jquery

Examples related to focus

Examples related to cursor