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" означатиме, що користувач вставив текст з буфера обміну. Такі можливості допомагають створювати більш точну та гнучку логіку для обробки введення, особливо для додатків, де критично важливо розуміти, яким чином змінюється вміст.
| Порада: | Не завжди надійтесь на |
| Порада: | Враховуйте можливість автоматичних змін. Деякі мобільні клавіатури можуть автоматично змінювати введення користувача, що |
| Порада: |
|
Синтаксис
event.inputTypeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
60 |
66 |
10.1 |
47 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
60 |
60 |
66 |
10.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Використовуючи цей приклад, користувач може ввести текст вручну, вставити його з буфера обміну або видалити символи, і побачити в реальному часі, як змінюється значення inputType та його відображення. Колір тексту змінюється відповідно до типу введення, що робить приклад більш наочним і зрозумілим.
Цей код реагує на вставку з буфера обміну. Це корисно, коли ви хочете, наприклад, перевірити, чи не вставив користувач неправильно відформатовані дані або текст, який порушує правила введення.
document.querySelector('input').addEventListener('input', (event) => {
if (event.inputType === 'insertFromPaste') {
alert('Вставлений текст з буфера обміну');
}
});Цей приклад дозволяє відслідковувати випадки автозаміни тексту, наприклад, коли мобільна клавіатура автоматично замінює текст на запропоноване слово. Це важливо для форм з точним контролем введення, де навіть незначні зміни можуть мати значення для подальшої обробки.
document.querySelector('input').addEventListener('input', (event) => {
if (event.inputType === 'insertReplacementText') {
console.log('Автозамінений текст:', event.target.value);
}
});