JS властивість Event.keypress
Загальний опис
Подія keypress спрацьовує кожного разу, коли користувач натискає клавішу, що генерує символ. Це означає, що подія не буде викликана для клавіш управління, таких як Ctrl, Shift, Esc, або стрілки. Основна мета події — обробка введення символів з клавіатури в реальному часі. Її часто використовують для фільтрації введених даних або реагування на певні символи.
Один із важливих аспектів keypress полягає в тому, що вона викликається до того, як символ з'являється в полі введення. Таким чином, можна запобігти введенню небажаних символів. Основні властивості об'єкта event, які корисні при роботі з keypress, це:
event.key: містить символ клавіші, яку натиснули.event.charCode: повертає ASCII код символу, якщо такий є.event.preventDefault(): можна використовувати, щоб запобігти введенню певних символів.
Приклад використання:
document.addEventListener('keypress', function(event) {
console.log('Натиснута клавіша: ' + event.key);
});
Важливо відзначити, що подія keypress більше не рекомендована до використання для сучасних веб-додатків, оскільки вона застаріла і має обмежену підтримку. Її замінюють події keydown та keyup, які є більш універсальними і підтримують не лише символи, але й спеціальні клавіші.
Якщо потрібно обмежити введення тільки певних символів, наприклад, чисел, можна використовувати keypress для перевірки символу перед тим, як він з'явиться в полі:
document.addEventListener('keypress', function(event) {
if (!/\d/.test(event.key)) {
event.preventDefault(); // Блокуємо все, крім цифр
}
});
Незважаючи на це, keypress все ще може бути корисною для старіших систем або додатків, які не потребують складної обробки клавіатури. Проте сучасним стандартом є використання подій keydown або input для подібних завдань.
| Порада: | Якщо вам потрібно обробляти клавіші, що не генерують символи (наприклад, стрілки або функціональні клавіші), краще використовувати |
| Порада: | Застарілі браузери можуть мати різні версії події |
| Порада: |
|
Синтаксис
element.addEventListener('keypress', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі подія keypress використовується для того, щоб дозволити користувачу вводити лише літери. Якщо натискається будь-яка інша клавіша (цифра або спеціальний символ), введення блокується. Текст, який користувач вводить у поле, автоматично перетворюється на верхній регістр і відображається під полем у реальному часі.
Цей приклад дозволяє користувачу вводити лише цифри в поле введення. При натисканні будь-якого іншого символу, подія keypress спрацьовує і блокує введення цього символу через метод preventDefault().
const inputField = document.getElementById('numberInput');
inputField.addEventListener('keypress', function(event) {
if (!/[0-9]/.test(event.key)) {
event.preventDefault(); // Забороняє введення будь-яких символів, окрім цифр
}
});Цей приклад демонструє, як можна перетворювати введені символи у верхній регістр в реальному часі за допомогою події keypress. Кожен введений символ відображається як велика літера, незалежно від того, у якому регістрі його було введено.
const inputField = document.getElementById('uppercaseInput');
inputField.addEventListener('keypress', function(event) {
event.preventDefault(); // Забороняємо стандартну поведінку
inputField.value += event.key.toUpperCase(); // Додаємо символ у верхньому регістрі
});