Событие onkeypress стоит между onkeydown и onkeyup, т.к. оно возникает при нажатии клавиши клавиатуры, но после события onkeydown и до события onkeyup. Следует учитывать, что данное событие генерируется только для тех клавиш, которые являются символьными, т.е. это все буквы + символы типа $, #, @, ", ' и т.п.. Нажатия на остальные клавиши, например, на Shift, Ctrl, Alt или Esc не учитываются.
Мы используем это событие для проверки полей формы, в которые пользователь должен ввести либо только буквенные символы (поле "Имя") или только цифровые символы (поле "Телефон").
Разметка страницы
Для разметки страницы мы используем css-фреймворк Materialize, подключив его css- и js-файлы с CDN:
| 1 2 3 4 | <!-- подключение css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- подключение js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> |
Сама разметка будет простой:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <div class="container"> <h2 class="center-align">Заполните поля формы</h2> <div class="row"> <form class="col m12" name="userData"> <div class="row"> <div class="input-field col m6"> <input id="name" type="text" onkeypress="return !phoneNumbers(event)" maxlength="10"> <label for="name">Ваше имя (только буквы)</label> </div> <div class="input-field col m6"> <input id="phone" type="tel" onkeypress="return phoneNumbers(event)" maxlength="11"> <label for="phone">Ваш телефон (только цифры)</label> </div> </div> <div class="row"> <div class="col m6"> <button type="button" class="waves-effect waves-light btn" id="ready">Готово</button> </div> <div class="col m6"> <div id="output"></div> </div> </div> </form> </div> </div> |
Дополнительные стили нам не понадобятся - все оформление возьмет на себя Materialize CSS.
Написание JavaScript кода
Обратите внимание, что в разметке мы уже вызвали одну и ту же функцию phoneNumbers для обоих текстовых полей. Теперь нам нужно ее описать:
| 1 2 3 4 | function phoneNumbers(evt) { console.log('evt.key = '+evt.key); return /\d/.test(evt.key); } |
Код функции очень простой - она выводит в консоль, кукую клавишу нажал пользователь, а потом проверяет ее на соответствие регулярному выражению /\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().
| 1 2 3 4 5 6 7 8 | let ready = document.getElementById('ready'), output = document.getElementById('output'); ready.addEventListener('click', function() { output.innerHTML = 'Имя: '+document.userData.name.value+'<br>'+ 'Телефон: ' + document.userData.phone.value; document.userData.reset(); }) |
Также для того чтобы посмотреть, какая клавиша и в какой момент времени нажата (чисто с информационной целью):
| 1 2 3 | document.addEventListener('keypress', (event) => { console.log('нажата клавиша: ' + event.key); }); |
Давайте протестируем пример (посмотреть в новой вкладке):
Учтите, что лучше обрабатывать события onkeydown или onkeyup, т.к. они происходят ранее (позже), чем onkeypress, и позволяют обрабатывать больше клавиш.
