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?

Dan Abramov · Accepted Answer · 2014-03-07 16:22:51Z

158

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

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

edited Mar 7, 2014 at 16:22

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

answered Dec 25, 2011 at 22:30

scorpion9

1,5891 gold badge9 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Meshaal Over a year ago

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

john Smith Over a year ago

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

harpo Over a year ago

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

Fateh Khalsa Over a year ago

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

jg2703 Over a year ago

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

|

artlung · Accepted Answer · 2009-06-29 03:08:15Z

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, 2009 at 3:08

artlung

33.5k19 gold badges76 silver badges124 bronze badges

4 Comments

jerodsanto Over a year ago

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

artlung Over a year ago

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

JochenJung Over a year ago

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?

artlung Over a year ago

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

Douwe de Haan · Accepted Answer · 2017-07-19 10:00:42Z

54

Hope this help you:

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

edited Jul 19, 2017 at 10:00

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered Apr 24, 2014 at 6:26

harsh4u

2,6104 gold badges26 silver badges39 bronze badges

3 Comments

morten.c Over a year ago

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

Dan Barron Over a year ago

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

Ad Kahn Over a year ago

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"

jackocnr · Accepted Answer · 2014-02-21 04:47:44Z

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.

Jean-Paul · Accepted Answer · 2019-10-06 18:53:04Z

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

Chris Rosete · Accepted Answer · 2014-11-05 16:51:29Z

What about in one single line...

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

This line works for me.

SergO · Accepted Answer · 2011-07-14 09:11:06Z

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

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

pederOverland · Accepted Answer · 2010-09-09 12:02:11Z

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;

Tomas · Accepted Answer · 2011-03-29 11:47:46Z

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

Andreas Louv · Accepted Answer · 2012-10-30 12:00:55Z

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.

Fabrizio · Accepted Answer · 2014-05-23 02:45:49Z

like other said, clear and fill worked for me:

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

gorillagoat · Accepted Answer · 2016-08-16 21:06:51Z

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

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

Hari · Accepted Answer · 2012-04-18 23:15:23Z

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

hladas · Accepted Answer · 2013-05-13 15:09:38Z

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, 2013 at 15:09

hladas

211 bronze badge

1 Comment

Rupam Datta Over a year ago

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

madhu · Accepted Answer · 2015-07-08 05:41:39Z

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

Chong Lip Phang · Accepted Answer · 2018-06-15 02:41:17Z

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

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

xdazz · Accepted Answer · 2012-10-20 07:07:11Z

function CurFocus() { $('.txtEmail').focus(); } function pageLoad() { setTimeout(CurFocus(),3000); } window.onload = pageLoad;

Diganta Kumar · Accepted Answer · 2013-03-31 20:47:12Z

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>

chetan_verma · Accepted Answer · 2021-05-25 09:07:34Z

 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 !

Pergin Sheni · Accepted Answer · 2019-11-19 12:16:12Z

-4

It will focus with mouse point

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

edited Nov 19, 2019 at 12:16

answered Nov 19, 2019 at 6:29

Pergin Sheni

3913 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

20 Answers 20

9 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

9 Comments

4 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related