Атрибут oninput


10	79	3	11.6	3.1	6


4.4	6	12	2

Событие возникает, когда пользователь что-то вводит в текстовом поле формы (<input> или <textarea>), и меняет его значение.

Событие oninput похоже по своему действию на onchange, разница в следующем: oninput срабатывает сразу в момент изменения текста, onchange срабатывает только после потери элементом фокуса.

Синтаксис

oninput="<скрипт>"

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

См. скрипт.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Событие oninput</title> <style> .login { padding: 0.5em; /* Расстояние от текста до края */ } .btn-next { padding: 0.5em 1em; /* Расстояние от текста до края */ } .btn-next { background-color: #0174da; /* Цвет фона */ color: #fff; /* Цвет текста */ border: none; /* Убираем рамку */ border-radius: 0.4em; /* Скругление уголков */ } .btn-next:disabled { background-color: #e5e5e5; /* Цвет фона */ color: #737373; /* Цвет текста */ cursor: not-allowed; /* Меняем вид курсора */ } </style> </head> <body> <p><input class="login" placeholder="Введите логин" oninput="isEmptyValue()"></p> <p><button disabled class="btn-next">Продолжить</button></p> <script> var field = document.querySelector('.login'); // Поле для ввода логина var next = document.querySelector('.btn-next'); // Кнопка function isEmptyValue() { // Проверяем, что поле не пустое // Если поле пустое, то блокируем кнопку if(field.value != '') next.disabled = false; // Если поле не пустое, то кнопка разблокируется else next.disabled = true; } </script> </body> </html>

В данном примере пока текстовое поле пустое, кнопка остаётся блокированной. Как только в поле вводится произвольный текст, кнопка становится доступной для нажатия.