Question

64

How to set cursor position at the end of input text in Google Chrome

rated 0 times [ 67] [ 3] / answers: 1 / hits: 49290 / 10 Years ago, wed, february 19, 2014, 12:00:00

I'm trying to set the cursor in a text field with a focus function. I've made some research but none of the provided solutions seemed to work in Google Chrome. In Internet Explorer and Firefox this solution is working fine:

The js:

$('#Search').focus(function() {

  var SearchInput = $('#Search');

  var strLength= SearchInput.val().length;

  SearchInput.focus();

  SearchInput[0].setSelectionRange(strLength, strLength);

});

The HTML:

<input type=text id=Search value=Hello World />

Here's the link to my jsfiddle.

Is there any way to make this work in Google Chrome too?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 10 Years ago kaya · Accepted Answer

It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:

$('#Search').focus(function() {

    setTimeout((function(el) {

        var strLength = el.value.length;

        return function() {

            if(el.setSelectionRange !== undefined) {

                el.setSelectionRange(strLength, strLength);

            } else {

                $(el).val(el.value);

            }

    }}(this)), 0);

});

Try this fiddle: http://jsfiddle.net/esnvh/26/

Edited to 0ms timeout, as @SparK pointed out this is enough to push to end of execution queue.