Событие возникает, когда пользователь что-то вводит в текстовом поле формы (<input> или <textarea>), и меняет его значение.
Событие oninput похоже по своему действию на onchange, разница в следующем: oninput срабатывает сразу в момент изменения текста, onchange срабатывает только после потери элементом фокуса.
Синтаксис
oninput="<скрипт>"
Значения
См. скрипт.
Пример
<!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>
В данном примере пока текстовое поле пустое, кнопка остаётся блокированной. Как только в поле вводится произвольный текст,
кнопка становится доступной для нажатия.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.