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?

Qualification

Answer 1

Looks like clearing the value after focusing and then resetting works.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Ofeliaofella

This is the only solution I've been able to find that works cross-browser. Kudos to you! – Montiel

This works fine with FF and chrome but not in IE.. any one know how to solve this issue in IE ? – Akan

Note also you can chain the calls: var temp = input.focus().val(); input.val('').val(temp); – Susansusana

This can get even simpler: input.focus().val(input.val()); – Graig

Nice solution. Works as expected and cross browser. And works on multiple input types, awesome. Thanks! – Pelt

@FatehKhalsa this doesn't work for me. The value needs to change for the cursor to move. harpo's method works! – Gravimeter

Doesn't seem to work with contenteditable elements for some reason, maybe as one has to use .html() rather than .val() – Munro

doesn't work with divs or maybe it's simply because they're contentEditable like @joel2703 pointed out – Battiste

Worked for me, thanks. Is it just me or is it absolutely mind-blowing that JS/Jquery don't have a specific function that does this? These methods don't seem efficient and it has to be a very common action. – Sweepings

Answer 2

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 <input> 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.

Soluk

Yes, input is an <input> element. I tried this and it didn't work in FF3 or Safari 4 – Qualification

Any update on this? Worked for me. Update question or add an answer if you found a solution. – Soluk

In FF15 this sets the cursor to the begin of the input field. Other than that its working fine. Do you have a solution for FF as well? – Ruff

@Ruff I have not looked at this since 2009 - it worked then with FF3 and jQuery. If you come up with a solution using current jQuery and FF15, please feel free to edit this post. – Soluk

Answer 3

Hope this help you:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Henslowe

Works fine, I think this is a better solution than resetting the value, especially when there's some kind of model-view-binding. – Willianwillie

This is the right answer, setting exactly what you want to set without kludging it. – Werth

this solution is no longer working. it give "Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable" – Ella

Answer 4

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();

Gd

Amazing thanks, only solution I've found come 2020 that seems to work reliably. – Demetriusdemeyer

Answer 5

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

Bandwidth

Answer 6

What about in one single line...

$('#txtSample').focus().val($('#txtSample').val());

This line works for me.

Pinette

Answer 7

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());

Melessa

This kind of worked for me, but I had to do something like: var input = $("#inputID"); tmp = input.val(); input.focus().val("").blur().focus().val(tmp); – Body

Answer 8

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.

Forefoot

Answer 9

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

Gilreath

You can reduce second line to var key = e.charCode || e.keyCode || 0; – Samoyed

Answer 10

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();
                }
            }
        }

Perceivable

Answer 11

like other said, clear and fill worked for me:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

Imprimatur

Answer 12

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 <input> with the value of a clicked <button>. val() is set first. then focus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

Penza

U can make it more simple one line instead of two: $('input[name=item1]').val(value).focus(); – Heteropolar

Answer 13

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).

Tortfeasor

Answer 14

At the first you have to set focus on selected textbox object and next you set the value.

$('#inputID').focus();
$('#inputID').val('someValue')

Feeze

I tried this but doesnot work. Does it also work for you with a div content editable set to true? – Goldbrick

Answer 15

    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && 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..

Muzzleloader

Answer 16

Here is another one, a one liner which does not reassign the value:

$("#inp").focus()[0].setSelectionRange(99999, 99999);

Ozonosphere

Answer 17

function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

Typeface

Answer 18

The answer from scorpion9 works. Just to make it more clear see my code below,

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>

Pair

Answer 19

  var prevInputVal = $('#input_id').val();
  $('#input_id').val('').focus().val(prevInputVal)

Store input previous value in a variable -> empty input value -> focus input -> reassign original value SIMPLE !

Bangs

Answer 20

It will focus with mouse point

$("#TextBox").focus();

Axon