JQuery на событие нажатия клавиш для фокусировки на кнопке, кажется, автоматически нажимает кнопку?

Question

У меня есть два текстовых ввода и кнопка.

Для обоих текстовых вводов я установил событие keydown с помощью JQuery для переключения фокуса на следующий элемент при нажатии Enter.

Итак:

• Нажатие клавиши Enter во время первого ввода должно фокусироваться на втором входе.
• Нажатие клавиши Enter во время второго ввода должно фокусироваться на кнопке.

Демонстрационный код здесь: https://jsfiddle.net/5v8ze2m4/

Чтобы увидеть, что происходит:

1. Нажмите на первое поле ввода, чтобы установить фокус там.
2. Нажмите Enter.Фокус переместится во второе поле ввода (правильно).
3. Нажмите Enter еще раз.Фокус переместится на кнопку (правильно) , однако событие нажатия кнопки также срабатывает (НЕ правильно)

Обратите внимание, что это только происходит, когда я используюклавиша ввода.Если я изменю условие keyCode на 40 вместо 13 (для клавиши курсора вниз ↓ вместо Enter) в обоих обработчиках событий, это будет работать должным образом.

Кроме того, еще одна небольшая проблема: Я автоматически фокусируюсь на первом элементе ввода, который, кажется, не работает.Но это может быть связано с JSFiddle.

Answer 1

Вам нужно остановить событие по умолчанию.Используйте метод event.preventDefault(), чтобы сделать так, чтобы фокусировка на кнопке выполнялась следующим образом:

function FocusToButton(evt)
{
    evt.preventDefault();
    var keyCode = evt.keyCode || evt.which; 
    if (keyCode==13) $('#btn').focus();
}

Было бы неплохо добавить его и в другие функции.Подробнее о protectDefault () здесь