Вы здесь: Главная » JavaScript » Обработка событий » Обработка события onkeypress

Обработка события onkeypress

Событие onkeypress стоит между onkeydown и onkeyup, т.к. оно возникает при нажатии клавиши клавиатуры, но после события onkeydown и до события onkeyup. Следует учитывать, что данное событие генерируется только для тех клавиш, которые являются символьными, т.е. это все буквы + символы типа $, #, @, ", ' и т.п.. Нажатия на остальные клавиши, например, на Shift, Ctrl, Alt или Esc не учитываются.

Мы используем это событие для проверки полей формы, в которые пользователь должен ввести либо только буквенные символы (поле "Имя") или только цифровые символы (поле "Телефон").

Разметка страницы

Для разметки страницы мы используем css-фреймворк Materialize, подключив его css- и js-файлы с CDN:

Сама разметка будет простой:

Дополнительные стили нам не понадобятся - все оформление возьмет на себя Materialize CSS.

Написание JavaScript кода

Обратите внимание, что в разметке мы уже вызвали одну и ту же функцию phoneNumbers  для обоих текстовых полей. Теперь нам нужно ее описать:

Код функции очень простой - она выводит в консоль, кукую клавишу нажал пользователь, а потом проверяет ее на соответствие регулярному выражению /\d/, которое подразумевает наличие цифры от 1 до 9 в качестве нажатой клавиши (свойство evt.key). Откуда взялось свойство evt.key? Дело в том, что мы передали в нашу функцию единственный параметр event, который связан с объектом события, которое генерирует браузер и которое имеет ряд свойств и методов. Одним из таких свойств для событий клавиатуры является event.key, которое возвращает символ на нажатой клавише. В нашей функции передаваемый параметр имеет имя evt, поэтому и свойство записывается, как evt.key вместо event.key.

Функция phoneNumbers() возвращает либо true, либо false, т.к. только такие значения может вернуть метод test() для регулярных выражений. И это значение мы возвращаем в место вызова функции, которое привязано к обработчику события onkeypress, которое записано у нас в разметке как атрибут элемента <input>.

А теперь внимание! В функции мы проверяем, ввел ли пользователь цифры, и только тогда возвращаем true. Поэтому onkeypress="return phoneNumbers(event)" ввод символа для поля ввода.для проверки телефонного номера при вводе цифры дает это сделать, а в случае ввода другого символа ничего не делает, т.к. выражение return false отменяет действие по умолчанию, т.е. ввод символа для поля ввода. Для поля ввода имени мы чуть-чуть изменили строку вызова функции: onkeypress="return !phoneNumbers(event)". Добавление восклицательного знака преобразует возвращаемое значение из функции в обратное, т.е. когда из функции возвращается true, оно в результате превращается в false, поэтому для имени мы можем ввести любые символы, кроме цифр.

Минусом такого подхода является то, что пользователь может ввести в поле "Имя" любые символы, кроме букв, но в данном примере мы не отслеживаем недопустимые символы. Попробуйте сделать это самостоятельно.

Добавим еще вывод значений, введенных пользователем, в  <div id="output"></div> при клике на кнопке "Готово", а также очистку полей формы с помощью метода формы reset().

Также для того чтобы посмотреть, какая клавиша и в какой момент времени нажата (чисто с информационной целью):

Давайте протестируем пример (посмотреть в новой вкладке):

Учтите, что лучше обрабатывать события onkeydown или onkeyup, т.к. они происходят ранее (позже), чем onkeypress, и позволяют обрабатывать больше клавиш.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *