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` може працювати з emoji, що дає можливість легко відстежувати їхнє введення або видалення. Це може бути корисним для чатів, соцмереж або будь-яких додатків, де підтримуються emoji.
Порада:	Під час вставки тексту (наприклад, копіювання-вставки) `data` повертає увесь вставлений рядок, що дозволяє відразу перевірити вставлений фрагмент на відповідність певним умовам чи форматам, без потреби обробляти окремі символи.
Порада:	Використовуючи `data`, можна легко обмежити допустимі символи під час введення. Наприклад, для обмеження лише цифрами слід використовувати регулярний вираз для перевірки значення `data` і блокування невідповідних символів.

Синтаксис

event.data

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі кожного разу, коли користувач вводить символ у полі input, на сторінці оновлюються два елементи: один показує останній доданий або видалений символ, а другий - повний поточний текст. Це надає користувачеві можливість у реальному часі бачити, які саме зміни відбуваються під час введення.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/XWvNjvm">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

Цей приклад показує, як відслідковувати введення спеціальних символів. Код перевіряє, чи введений останній символ є спеціальним, що може бути корисним для полів паролів, де такі символи є обов'язковими або навпаки забороненими.

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

JS довідник

JavaScript

Наповнення JS розділу