html подія oninput
Подія oninput викликається, коли користувач вводить дані поле.
Подія oninput викликається, коли значення елемента <input> чи <textarea> змінені.
- Нотатка
-
Ця подія схожа на подію
автор: с3сonchange. Різниця в тому, що подія oninput відбувається відразу ж після того як значення елемента змінилося, в той час як onchange відбувається, коли елемент втрачає фокус. Інша відмінність в тому, що onchange подія також працює на елементах<select>та<keygen>.
Синтаксис
<element oninput="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 5+ | 5+ | 4+ | 12.1 | 12+ | 8.0+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2.3+ | 1+ | 1+ | 5+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML події oninput з використаням Jqwery
HTML
<textarea placeholder="Введіть текст"></textarea>
<div></div>JS
document.querySelectorAll('textarea').forEach((el) => el.addEventListener('input', function () {
text = document.querySelector('textarea').value;
document.querySelectorAll('div').forEach((n) => n.innerHTML = "Ви водите :" + text);
}));Найпростіший приклад використання HTML події oninput
HTML
<input type="text" value="" oninput="Function(this)">
<p id="text"></p>
<p><input type="date" oninput="Function(this)"> - Поле для вибору календарної дати.</p>
<p id="date"></p>
<p><input type="number" value = "10" oninput="Function(this)"> - поле для вибору тільки числ </p>
<p id="number"></p>
<p><input type="password" value="" oninput="Function(this)"> - поле для введення поролю</p>
<p id="password"></p>JS
function Function(element) {
document.getElementById(element.type).innerHTML = "Ви ввели " + element.value;
}
//# sourceURL=pen.jsприклад використання HTML події oninput
HTML
<textarea placeholder="Введіть текст" id="text"></textarea>
<div id="div"></div>JS
document.getElementById("text").oninput = function () {
document.getElementById("div").innerHTML = "Ви ввели " + document.getElementById("text").value;
};Різниця між HTML 4.01 та HTML5
Цей атрибут з’явився тільки в HTML5
Коментарі
Коментарів ще немає — будьте першим!