put cursor at end of text input's value

Question

So, currently I have a text-input-field with a value that is also autofocused.

On page load, the value is selected / highlighted. Is there a way I can put the cursor at the end of the value text instead of highlighting it in javascript or CSS?

Here is a js fiddle where the autofocused text's value is highlighted: http://jsfiddle.net/TaGL5/

Here is the HTML code: <input type="text" value="value text" autofocus />

onfocus "this.value = this.value" will assign existing value to textbox, it's like you typed that text and so you have cursor at end. — VishalDevgire, Jul 22 '13 at 05:57
possible duplicate of [Use JavaScript to place cursor at end of text in text input element](http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element) — Gary, Jul 30 '15 at 12:53

score 44 · Answer 1 · edited Feb 03 '20 at 18:47

44

Upgrade to @harsha's answer

I found that to make solution work with Firefox, we need temporary reset value to "not-equal of value", then set it back

<input type="text" autofocus value="value text" onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" />

edited Feb 03 '20 at 18:47

Souleste

1,887
1
12
39

answered Jul 22 '14 at 15:20

J_z

993
1
9
18

4

@vol7ron *"chenosaurus's method"* :D – yckart Dec 07 '16 at 09:14
I'm (quite new to) Spring boot and using it. Seemed I needed to use this method to get desired effect. – Bill Naylor May 10 '19 at 17:38

score 40 · Accepted Answer · edited Jul 30 '15 at 13:05

40

This works for me

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

edited Jul 30 '15 at 13:05

Gary

13,303
18
49
71

answered Jul 22 '13 at 05:54

Harsha Venkataramu

2,887
1
34
58

6

Just to update, this either no longer works in FF, or never did. In the current version of FF, it selects the entire text, it does not place cursor after. – vol7ron Sep 29 '15 at 22:51
1

I found this answer helpful and works just fine cross multiple browsers: stackoverflow.com/a/19568146/936468 – Simon Mbatia Oct 13 '16 at 12:59
I upvoted. I thought it was a good solution. Down vote wasn't me. – Millhorn Sep 04 '18 at 12:46
1

Does not work in FF (2022) – Stephane Paquet Apr 22 '22 at 17:40

score 8 · Answer 3 · edited May 23 '17 at 12:18

Use Jquery for this:

$(function() {
      var input = $("#txt1");
    var len = input.val().length;
    input[0].focus();
    input[0].setSelectionRange(len, len);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="text" id="txt1" value="Lorem" style="width:400px;" />

But some browsers don't support enter code here property, in which case use this:

$(document).ready(function(){
    $("#search").focus(function(){
        if (this.setSelectionRange)
        {
        var len = $(this).val().length;
        this.setSelectionRange(len, len);
        }
        else
        {
        $(this).val($(this).val());
        }
   
});

$("#search").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="search" type="text" value="mycurrtext" size="30" name="search" />

This question already exist on stackoverflow:

Reference1

Reference2

It's a little bit of an overkill to use a thirdparty library for such an easy task — shi, Oct 28 '16 at 13:39

score 8 · Answer 4 · answered Jan 24 '19 at 07:09

8

Use this, its nice work for me...

<input type="text" name="txt" value="value text" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);">

OR add this line to your input element

onfocus="this.setSelectionRange(this.value.length,this.value.length);"

answered Jan 24 '19 at 07:09

Obaidul Haque

916
11
18

I can confirm this works perfectly. I am using Brave (based on chromium) – corlaez Jun 06 '23 at 06:00

score 3 · Answer 5 · edited Jan 24 '19 at 07:52

3

You can add this parameter to your text input field:

onmouseover="this.setSelectionRange(this.value.length,this.value.length);"
onfocus="this.setSelectionRange(this.value.length,this.value.length);"

NB: Works well under Chromium in 2017.

edited Jan 24 '19 at 07:52

Obaidul Haque

916
11
18

answered Nov 19 '17 at 04:59

user4723924

31
1

works perfect in FF and Chrome – Stephane Paquet Apr 22 '22 at 17:40

score 0 · Answer 6 · edited Dec 09 '22 at 10:09

0

Select element by class or id, then focus, and then re-insert value.

<input type="text" class="element-to-autofocus" value="Some existed text" />
<script>
  temp_el = document.querySelector('.element-to-autofocus');
  temp_el.focus();
  temp_value = temp_el.value;
  temp_el.value = '';
  temp_el.value = temp_value;
</script>

edited Dec 09 '22 at 10:09

Anindya Dey

825
1
8
18

answered Dec 06 '22 at 13:19

Артём Пешков

1

put cursor at end of text input's value

6 Answers6

Linked