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

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

inputType є властивістю об’єкта InputEvent, яка описує тип зміни, що відбулася з елементом введення. Це може бути корисно, коли потрібно визначити, як саме змінився текст у полі вводу, будь то додавання або видалення тексту, вставка або заміна тощо. Наприклад, inputType може повертати значення "insertText", "deleteContentBackward", "insertFromPaste" і багато інших.

Ця властивість особливо корисна у випадках, коли потрібно реагувати на різні типи змін, внесених користувачем. Наприклад, при введенні тексту в полі можна визначити, чи це була вставка тексту, видалення, вставка з буфера обміну або інша операція. Використання inputType спрощує написання умовних операторів для обробки певних типів змін.

Ось приклад коду, який демонструє використання inputType:

   document.querySelector('input').addEventListener('input', (event) => {
       console.log(event.inputType);
   });

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

Робота з inputType допомагає розрізняти, що саме користувач зробив у полі введення. Наприклад, значення "insertFromPaste" означатиме, що користувач вставив текст з буфера обміну. Такі можливості допомагають створювати більш точну та гнучку логіку для обробки введення, особливо для додатків, де критично важливо розуміти, яким чином змінюється вміст.

правити

Порада

Не завжди надійтесь на inputType для детекції швидких клавіш. inputType не буде точним для таких дій, як "Ctrl + Z" (відміна) або "Ctrl + X" (вирізання). Якщо важливо відстежувати ці комбінації, розгляньте додаткове використання події keydown.

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

Порада

Враховуйте можливість автоматичних змін. Деякі мобільні клавіатури можуть автоматично змінювати введення користувача, що inputType відзначить, як "insertReplacementText". Це може порушити логіку перевірки введення, тому обробляйте такі зміни з обережністю.

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

Порада

inputType допомагає уникати зайвих обробок. Замість перевірки на зміну кожного символу, можна використовувати inputType, щоб реагувати лише на вставку чи видалення, що значно оптимізує обробку подій для складних форм або великих даних.

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

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

Синтаксис

event.inputType

Переглядачі

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

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

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

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

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

Приклади

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

<input type="text" value="текст для прикладу">

document.querySelector('input').addEventListener('input', (event) => {
    if (event.inputType === 'insertReplacementText') {
        console.log('Автозамінений текст:', event.target.value);
    }
});

<header>
  <h2 class="title">InputEvent -> inputType</h2>
  <p class="description">Визначає тип змін, внесених до текстового поля.</p>
</header>
<main>
  <div class="result">
    <label for="textInput">Введіть текст або скористайтесь буфером обміну:</label><br>
    <input type="text" id="textInput" placeholder="Введіть текст тут" />
    <p id="output">Тип введення: <span id="inputType">невідомо</span></p>
  </div>
</main>

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

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  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;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

label {
  font-weight: bold;
}

#textInput {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  font-size: 1em;
}

#output {
  margin-top: 15px;
  font-size: 1.1em;
}

const textInput = document.getElementById('textInput');
const inputTypeOutput = document.getElementById('inputType');

textInput.addEventListener('input', event => {
  inputTypeOutput.textContent = event.inputType;

  switch (event.inputType) {
    case 'insertText':
      inputTypeOutput.style.color = 'green';
      break;
    case 'deleteContentBackward':
      inputTypeOutput.style.color = 'red';
      break;
    case 'insertFromPaste':
      inputTypeOutput.style.color = 'blue';
      break;
    default:
      inputTypeOutput.style.color = 'black';}

});
//# sourceURL=pen.js

<input type="text" value="текст для прикладу">

document.querySelector('input').addEventListener('input', (event) => {
    if (event.inputType === 'insertFromPaste') {
        alert('Вставлений текст з буфера обміну');
    }
});