keypress в JavaScript — застаріла подія символьної клавіші

Загальний опис

Подія 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 для подібних завдань.

правити

Порада

Якщо вам потрібно обробляти клавіші, що не генерують символи (наприклад, стрілки або функціональні клавіші), краще використовувати keydown, оскільки keypress працює тільки з клавішами, які генерують символи.

автор: Bond правити

Порада

Застарілі браузери можуть мати різні версії події keypress, тому, якщо потрібно підтримувати старіші платформи, перевіряйте коди символів через event.charCode і порівнюйте з event.keyCode.

автор: Bond правити

Порада

keypress більше не рекомендується для сучасних веб-додатків, тому варто поступово переходити на події keydown і keyup для універсальної обробки клавіш.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('keypress', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	6	1.3	≤12.1	12	9

Підтримка: мобільні переглядачі

Переглядач
	1	18	6	1

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">keypress</h2>
  <p class="description">Спрацьовує під час натискання клавіші, що генерує символ, для контролю введених даних.</p>
</header>
<main>
  <div class="result">
    <label for="textInput">Введіть текст (тільки літери):</label>
    <input type="text" id="textInput" placeholder="Введіть тільки літери">
    <p id="outputText">Введений текст з'явиться тут...</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#textInput {
  padding: 8px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
}

#outputText {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

const textInput = document.getElementById('textInput');
const outputText = document.getElementById('outputText');

textInput.addEventListener('keypress', function (event) {
  // Дозволяємо вводити тільки літери
  if (!/[a-zA-Z]/.test(event.key)) {
    event.preventDefault();
  }
});

textInput.addEventListener('input', function (event) {
  // Перетворюємо текст на верхній регістр і показуємо в реальному часі
  outputText.textContent = textInput.value.toUpperCase();
});
//# sourceURL=pen.js

<input type="number" id="numberInput" value="10">

const inputField = document.getElementById('numberInput');

inputField.addEventListener('keypress', function(event) {
  if (!/[0-9]/.test(event.key)) {
    event.preventDefault(); // Забороняє введення будь-яких символів, окрім цифр
  }
});

<input type="text" id="uppercaseInput" value="текст для прикладу" placeholder="Введи щось">

const inputField = document.getElementById('uppercaseInput');

inputField.addEventListener('keypress', function(event) {
  event.preventDefault(); // Забороняємо стандартну поведінку
  inputField.value += event.key.toUpperCase(); // Додаємо символ у верхньому регістрі
});