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

Asked
Viewd35893

33

Я работаю с базовым текстовым полем 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 тоже не помогает.

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

5 ответов

29

Чтобы сохранить позицию курсора, сделайте резервную копию 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);
 
  • Сломал! Большое спасибо, это прекрасно. :)

    riddle04 июля 2009, 10:58
0

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

  • К сожалению, событие e.preventDefault() в keypress не позволяет мне вводить что-либо туда (я хочу, чтобы ввод работал как в Firebug). И это не решает мою проблему, по крайней мере, в моем браузере - курсор все равно прыгает в самом начале.

    riddle03 июля 2009, 19:56
-2

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

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

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

  • Спасибо. Фактическое обновление input.value приведет к тому, что курсор вернется в конец. Так что я могу определять положение курсора и восстанавливать его после внесения изменений (например, если он находится в середине числа).

    Но я все еще ищу лучшее решение, если оно есть.

    riddle03 июля 2009, 19:29