JS властивість Event.data

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

data — це властивість об'єкта InputEvent, яка містить дані, що були додані або видалені під час події введення, наприклад, при наборі тексту в полі вводу або видаленні символів. Значення data є корисним для відстеження точного введеного символу або символів, що дозволяє створювати розширену функціональність для обробки вводу користувача, наприклад, фільтрацію, автоформатування чи перевірку даних у реальному часі. Якщо символ був видалений, властивість data поверне null.

Як працює data:
data стає доступною тільки під час події input, і вона актуальна лише для тієї події, в якій дані були змінені. Якщо в полі вводу, наприклад, було введено літеру «А», data поверне «А». Якщо відбулася вставка кількох символів одразу, значення data поверне цілу вставлену послідовність символів. Це робить data гнучким інструментом для ситуацій, де необхідно реагувати на конкретні зміни, здійснені користувачем.

Приклад використання:

inputElement.addEventListener('input', function(event) {
  console.log(event.data); // виведе символ або рядок, доданий під час введення
});

data зручно використовувати, коли потрібно контролювати дані під час введення в реальному часі. Наприклад, у формі з вимогою введення тільки цифр, data дозволяє негайно перевіряти, чи введений символ є числом, і, якщо ні, видаляти його або повідомляти користувача.

Особливості роботи з data:
Коли значення поля вводу змінюється за допомогою дій, таких як вставка, видалення або заміна тексту, data дозволяє легко відстежити, що конкретно змінилося, навіть якщо зміна містить більше ніж один символ. Це корисно, наприклад, для перевірки тексту на відповідність шаблону.

inputElement.addEventListener('input', function(event) {
  if (event.data && !/^\d+$/.test(event.data)) {
    console.log('Введено нечисловий символ');
  }
});

правити

Порада

Під час вставки тексту (наприклад, копіювання-вставки) data повертає увесь вставлений рядок, що дозволяє відразу перевірити вставлений фрагмент на відповідність певним умовам чи форматам, без потреби обробляти окремі символи.

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

Порада

Використовуючи data, можна легко обмежити допустимі символи під час введення. Наприклад, для обмеження лише цифрами слід використовувати регулярний вираз для перевірки значення data і блокування невідповідних символів.

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

Порада

data може працювати з emoji, що дає можливість легко відстежувати їхнє введення або видалення. Це може бути корисним для чатів, соцмереж або будь-яких додатків, де підтримуються emoji.

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

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

Синтаксис

event.data

Переглядачі

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

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

Переглядач
	60	67	10.1	47	79

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

Переглядач
	60	60	67	10.3

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

Переглядач
	-	-

Приклади

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

<div id="demo-inputElement">Демонстраційний елемент</div>

const inputElement = document.getElementById('demo-inputElement');

inputElement.addEventListener('input', function(event) {
  const lastChar = event.data ? event.data.charAt(event.data.length - 1) : '';
  if (lastChar && /[!@#$%^&*]/.test(lastChar)) {
    console.log('Введено спеціальний символ:', lastChar);
  }
});

<div id="demo-inputElement">Демонстраційний елемент</div>

const inputElement = document.getElementById('demo-inputElement');

inputElement.addEventListener('input', function(event) {
  if (event.data && event.data.toUpperCase() === event.data) {
    console.log('Введено заголовну літеру:', event.data);
  }
});