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

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 событие тоже не помогает.

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

Answer 1

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

Проблема в том, что WebKit реагирует на keydown и Опера предпочитает 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);

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

Текстовое поле.Устанавливает диапазон выбора (текстовое поле.значение.длина, текстовое поле.значение.длина);