Это первая из серии быстрых советов, которые я использую на повседневном кодировании с JavaScript.
Это о чем -то действительно не классном, которое получает событие Enter Key.
Давайте предположим, что вам нужно построить строку поиска в верхней части веб -сайта.
Чтобы сделать поиск, пользователь должен нажать Enter или нажать на кнопку поиска. Это звучит легко. Поскольку я использую jQuery, это что -то вроде этого.
$('input').on('keypress', (event)=> {
if(event.which === 13){
//Do Something
}
});
Это в основном говорит: когда пользователь набирает на вход, если у него нажимается клавиша, в которой есть код 13 (обычно клавиша Enter).
Если вы тестируете его на Chrome, это будет работать просто отлично. Но когда вы тестируете на Android -устройство, придет ад: у каждого ключа есть код 229!
У каждого ключа есть код 229 !!
Но не отчаивайтесь! Вот в чем дело: 229 – это ключевое событие, которое браузер испускает, когда он обрабатывает то, что напечатал пользователь, и Это часто происходит на Android из-за автоматической корреста Анкет
Поскольку автоматическая коррекция обрабатывает событие, чтобы предвидеть, что вводит пользователь, этот кусок кода не будет работать, потому что он всегда получает код 229 вместо каждого из отдельного кода ключа … Это не круто.
Но чтобы преодолеть это, вы можете сделать самый нативный вариант с самой широкой поддержкой каждого браузера.
Оберните свою панель поиска в форма ярлык.
Действительно просто и легко.
Просто положи все в тег формы …
… и разобраться с событием отправки, чтобы сделать то, что вы хотите!
$('form').on('submit', (event)=>{
event.preventDefault();
// Do what you want here
// In this case get input value
// Do a search
// Redirect to results page
});
Не забудьте предотвратить (), поэтому страница не будет обновляться, так как это родное поведение. Также не забудьте поместить кнопку в форму, поэтому она отправит ваши данные!
Вот и все. Это моя первая попытка чему -то научить Так что я надеюсь, что смог сказать это четким образом.
Увидимся в быстром совете 2.
Оригинал: “https://dev.to/rsmelo92/quick-javascript-tips-1-easiest-way-to-get-enter-key-event-with-jquery-29a7”