Я хочу поместить курсор в начало текстового поля onfocus

Возможный дубликат:
Установить курсор на длину 14 в фокусе текстового поля

Я могу сделать это в Firefox и IE. Но по какой-то причине он не работает в Chrome и Safari :(

Я просто использую строку ниже onfocus

$('input:text').focus(
function(){
      document.getElementById('id').setSelectionRange(0, 0);
    });

Может кто-нибудь подскажет, как сделать подобное в Chrome и сафари?


javascript onfocus
person Deepak Yadav    schedule 18.11.2011    source источник
comment
Я уже пробовал это перед тем, как опубликовать этот вопрос. Есть и другие подобные вопросы, но и createTextRange, и setSelectionRange не работают для меня на моем Safari n Chrome .. любые предложения, почему?   -  person Deepak Yadav    schedule 19.11.2011
comment
Это не должно быть закрыто как дубликат, поскольку на упомянутый выше вопрос нет ответов, которые решают эту проблему - что он не работает в Webkit.   -  person gilly3    schedule 19.11.2011

Ответы (2)


arrow_upward
15
arrow_downward

Проблема в том, что Chrome (я не слышал, чтобы Safari также делал это, но я поверьте вам на слово) убивает выделение после срабатывания события фокуса, поэтому вам нужно добавить таймер. Следующее адаптировано из моего ответа здесь:

Как поместите курсор в конец текста в текстовой области при переходе на вкладку

Однако, как правило, это не очень удобное использование: оно противоречит тому, чего ожидает пользователь, и удаляет полезные функции при использовании мыши (то есть курсор перемещается в то место, которое пользователь щелкает). Вы, вероятно, сможете обойти это с помощью некоторой обработки событий mousedown и mouseup.

Живая демонстрация: http://jsfiddle.net/timdown/z9DhX/1/

Код:

function moveCaretToStart(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = 0;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(true);
        range.select();
    }
}

var textBox = document.getElementById("id");

textBox.onfocus = function() {
    moveCaretToStart(textBox);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToStart(textBox);
    }, 1);
};
person Tim Down    schedule 19.11.2011
comment
Большое спасибо за объяснение! теперь он работает во всех браузерах с таймаутом fn :) - person Deepak Yadav; 21.11.2011
comment
Спасибо, Тим. Безусловно, самый полезный ответ, который я видел на SO. - person mwrf; 18.10.2012

arrow_upward
5
arrow_downward

Webkit сбрасывает положение курсора как часть события фокуса. Вам нужно отложить выполнение вашего скрипта до тех пор, пока событие не сработает полностью. Достаточно использовать setTimeout с задержкой 0:

$(":text").focus(function () {
    var input = this;
    setTimeout(function() {
        input.setSelectionRange(0, 0);
    }, 0);
});

Рабочая демонстрация: http://jsfiddle.net/ZkqGH/1/

person gilly3    schedule 18.11.2011
comment
спасибо за ответ, но он еще не работает :( .. мой курсор переходит в конец значения текстового поля, когда я нажимаю внутри него (только в хроме и сафари). В firefox все работает нормально, как и ожидалось. - person Deepak Yadav; 19.11.2011
comment
@Deepak - Я переписал свой ответ. setSelectionRange() работает нормально, вам просто нужно отложить выполнение, чтобы Chrome не сбрасывал положение каретки. - person gilly3; 19.11.2011