Запретить поведение по умолчанию при вводе текста при нажатии стрелки вверх

Question

Я работаю с базовым текстовым полем HTML <input type="text"/> с числовым значением.

Я добавляю событие JavaScript keyup, чтобы увидеть, когда пользователь нажимает клавишу со стрелкой вверх (e.which == 38), а затем увеличиваю числовое значение.

Код работает хорошо, но меня беспокоит одна вещь. И Safari / Mac, и Firefox / Mac перемещают курсор в самое начало, когда я нажимаю клавишу со стрелкой вверх. Насколько мне известно, это поведение по умолчанию для каждого текстового поля <input type="text"/>, и это имеет смысл.

Но это создает не очень эстетичный эффект прыжков курсора назад и вперед (после изменения значения).

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

 input.addEventListener('keydown', function(e) {
    e.preventDefault();
}, false);

Добавление e.preventDefault() в событие keyup тоже не помогает.

Есть ли способ предотвратить перемещение курсора?

score 29 · Accepted Answer · 03 июля 2009, 23:18

Чтобы сохранить позицию курсора, сделайте резервную копию input.selectionStart перед изменением значения.

Проблема в том, что WebKit реагирует на keydown, а Opera предпочитает keypress, поэтому есть кладжа: и то, и другое обрабатываются и регулируются.

 var ignoreKey = false;
var handler = function(e)
{
    if (ignoreKey)
    {
        e.preventDefault();
        return;
    }
    if (e.keyCode == 38 || e.keyCode == 40) 
    {
        var pos = this.selectionStart;
        this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);        
        this.selectionStart = pos; this.selectionEnd = pos;

        ignoreKey = true; setTimeout(function(){ignoreKey=false},1);
        e.preventDefault();
    }
};

input.addEventListener('keydown',handler,false);
input.addEventListener('keypress',handler,false);

score 0 · Answer 2 · 03 июля 2009, 19:42

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

score -2 · Answer 3 · 03 июля 2009, 19:24

Наверное, нет. Вместо этого вам следует искать решение, чтобы переместить курсор обратно в конец поля, где он был. Эффект будет таким же для пользователя, поскольку он слишком быстр для восприятия человеком.

Я погуглил и нашел этот фрагмент кода. Я не могу его сейчас протестировать, и говорят, что он не работает в IE 6.

textBox.setSelectionRange (textBox.value.length, textBox.value.length);

Запретить поведение по умолчанию при вводе текста при нажатии стрелки вверх

5 ответов