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?

score 155 · Answer 1 · edited Mar 07 '14 at 16:22

155

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

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

edited Mar 07 '14 at 16:22

Dan Abramov

264,556
84
409
511

answered Dec 25 '11 at 22:30

scorpion9

1,559
1
9
2

4

This is the only solution I've been able to find that works cross-browser. Kudos to you! – Meshaal May 09 '12 at 01:16
2

This works fine with FF and chrome but not in IE.. any one know how to solve this issue in IE ? – john Smith Sep 20 '12 at 13:35
1

Note also you can chain the calls: `var temp = input.focus().val(); input.val('').val(temp);` – harpo Feb 22 '14 at 04:40
25

This can get even simpler: `input.focus().val(input.val());` – Fateh Khalsa May 30 '14 at 18:10
Nice solution. Works as expected and cross browser. And works on multiple input types, awesome. Thanks! – EHerman Nov 19 '14 at 18:24
@FatehKhalsa this doesn't work for me. The value needs to change for the cursor to move. harpo's method works! – Henridv Jan 14 '15 at 10:33
2

Doesn't seem to work with `contenteditable` elements for some reason, maybe as one has to use `.html()` rather than `.val()` – jg2703 May 03 '17 at 15:11
doesn't work with `divs` or maybe it's simply because they're `contentEditable` like @joel2703 pointed out – oldboy Dec 25 '17 at 19:25
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. – albertrw Sep 03 '21 at 18:47

score 56 · Answer 2 · answered Jun 29 '09 at 03:08

56

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.

answered Jun 29 '09 at 03:08

artlung

33,305
16
69
121

1

Yes, input is an element. I tried this and it didn't work in FF3 or Safari 4 – jerodsanto Jun 29 '09 at 12:52
Any update on this? Worked for me. Update question or add an answer if you found a solution. – artlung Jul 14 '09 at 22:53
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? – JochenJung Sep 11 '12 at 10:49
@JochenJung 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. – artlung Sep 11 '12 at 12:44

score 52 · Answer 3 · edited Jul 19 '17 at 10:00

52

Hope this help you:

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

edited Jul 19 '17 at 10:00

Douwe de Haan

6,247
1
30
45

answered Apr 24 '14 at 06:26

harsh4u

2,550
4
24
39

4

Works fine, I think this is a better solution than resetting the value, especially when there's some kind of model-view-binding. – morten.c Sep 05 '16 at 12:53
2

This is the right answer, setting exactly what you want to set without kludging it. – Dan Barron Apr 18 '19 at 13:02
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" – Ad Kahn Jun 16 '23 at 16:26

score 16 · Answer 4 · answered Feb 21 '14 at 04:47

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

Amazing thanks, only solution I've found come 2020 that seems to work reliably. — AdamJones, Mar 31 '20 at 14:32

score 13 · Answer 5 · edited Oct 06 '19 at 18:53

13

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

edited Oct 06 '19 at 18:53

Jean-Paul

19,910
9
62
88

answered Sep 19 '14 at 06:28

Aamir Shahzad

6,683
8
47
70

Chris Rosete · Answer 6 · 2014-11-05T16:51:29.537

12

What about in one single line...

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

This line works for me.

edited Nov 05 '14 at 16:51

answered Nov 05 '14 at 16:13

Chris Rosete

1,240
15
13

score 8 · Answer 7 · answered Jul 14 '11 at 09:11

8

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

answered Jul 14 '11 at 09:11

SergO

2,703
1
30
23

1

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); – will824 Jan 22 '13 at 22:18

score 6 · Answer 8 · edited Oct 30 '12 at 12:00

6

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.

edited Oct 30 '12 at 12:00

Andreas Louv

46,145
13
104
123

answered Jun 29 '09 at 03:07

TheVillageIdiot

40,053
20
133
188

score 6 · Answer 9 · answered Sep 09 '10 at 12:02

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

You can reduce second line to `var key = e.charCode || e.keyCode || 0;` — iCollect.it Ltd, Oct 04 '16 at 14:25

score 6 · Answer 10 · answered Mar 29 '11 at 11:47

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

score 4 · Answer 11 · answered May 23 '14 at 02:45

4

like other said, clear and fill worked for me:

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

answered May 23 '14 at 02:45

Fabrizio

3,734
2
29
32

gorillagoat · Answer 12 · 2016-08-16T21:06:51.237

3

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

edited Aug 16 '16 at 21:06

answered Aug 16 '16 at 20:55

gorillagoat

66
5

U can make it more simple one line instead of two: `$('input[name=item1]').val(value).focus();` – inMILD Jul 08 '18 at 04:53

score 2 · Answer 13 · edited Apr 18 '12 at 23:15

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

score 2 · Answer 14 · answered May 13 '13 at 15:09

2

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

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

answered May 13 '13 at 15:09

hladas

21
1

1

I tried this but doesnot work. Does it also work for you with a div content editable set to true? – Rupam Datta Sep 12 '13 at 06:21

score 2 · Answer 15 · answered Jul 08 '15 at 05:41

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

score 1 · Answer 16 · answered Jun 15 '18 at 02:41

1

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

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

answered Jun 15 '18 at 02:41

Chong Lip Phang

8,755
5
65
100

score 0 · Answer 17 · edited Oct 20 '12 at 07:07

0

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

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

window.onload = pageLoad;

edited Oct 20 '12 at 07:07

xdazz

158,678
38
247
274

answered Jun 13 '12 at 10:26

abbijohn

1
1

score 0 · Answer 18 · answered Mar 31 '13 at 20:47

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>

score 0 · Answer 19 · answered May 25 '21 at 09:07

0

  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 !

answered May 25 '21 at 09:07

chetan_verma

1
2

Pergin Sheni · Answer 20 · 2019-11-19T12:16:12.587

-4

It will focus with mouse point

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

edited Nov 19 '19 at 12:16

answered Nov 19 '19 at 06:29

Pergin Sheni

393
2
11

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

20 Answers20

Linked

Related