Как установить позицию курсора в конце текста ввода в Google Chrome

Я пытаюсь установить курсор в текстовое поле с функцией фокусировки. Я провел несколько исследований, но ни один из предлагаемых решений, похоже, не работал в Google Chrome. В Internet Explorer и Firefox это решение работает нормально:

js:

$('#Search').focus(function() {
  var SearchInput = $('#Search');
  var strLength= SearchInput.val().length;
  SearchInput.focus();
  SearchInput[0].setSelectionRange(strLength, strLength);
});

HTML:

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

Здесь ссылка на мой jsfiddle.

Есть ли способ сделать эту работу в Google Chrome тоже?

Ответы

Ответ 1

Похоже, что фокусное событие запускается до того, как курсор помещается, когда вы фокусируете ввод, хакерским обходным путем было бы использовать setTimeout следующим образом:

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

Попробуйте эту скрипту: http://jsfiddle.net/esnvh/26/

Отредактировано до 0 мс таймаута, так как @SparK указал, что этого достаточно, чтобы выполнить до конца очереди выполнения.

Ответ 2

Обновленный код

Ссылка: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

setSelectionRange не поддерживается в IE, Opera и Safari

Я предлагаю вам сделать что-то вроде этого (работает в IE, Chrome, Safari, Firefox).

$('#Search').on('mouseup', function() {
    var element = $(this)[0];
    if (this.setSelectionRange) {
        var len = $(this).val().length * 2;
        element.setSelectionRange(len, len);
    }
    else {
        $(this).val($(this).val());
        $(this).focus();
    }
    element.scrollTop = 9999;
});

Попробуйте следующее: http://jsfiddle.net/r5UVW/4/

Ответ 3

Используйте событие mouseup для этого:

$("#Search").mouseup(function () {
    this.setSelectionRange(this.value.length, this.value.length);    
});

Ответ 4

FYI, в настоящее время ввод номера не поддерживает setSelectionRange(), поэтому быстрое решение - просто выбрать текст, используя .select(). В настольных браузерах это подчеркивает текст, на мобильных телефонах это перемещает курсор прямо в конец текста.