Предотвращение поведения по умолчанию при вводе текста при нажатии стрелки вверх

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

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

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

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

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

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

Помещение e.preventDefault() в keyup не помогает.

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

Ответ 1

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

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

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);

Ответ 2

Я обнаружил, что лучшим решением является return false; для предотвращения поведения клавиши со стрелкой по умолчанию:

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);

Ответ 3

На самом деле, есть лучший и простой способ для выполнения этой задачи.

$('input').bind('keydown', function(e){
    if(e.keyCode == '38' || e.keyCode == '40'){
        e.preventDefault();
    }
});

Да, это так просто!

Ответ 4

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

Ответ 5

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

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

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