Элемент: событие input

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Событие input срабатывает, когда value элемента <input>, <select> или <textarea> изменено в результате действия пользователя (например, ввода текста в текстовое поле или выбора флажка).

Событие также применяется к элементам с включенным contenteditable и к любому элементу, когда включен designMode. В случае contenteditable и designMode, целевой объект события — это хост редактирования. Если эти свойства применяются к нескольким элементам, хост редактирования — это ближайший родительский элемент, родитель которого не является редактируемым.

Для элементов <input> с type=checkbox или type=radio, событие input должно срабатывать всякий раз, когда пользователь переключает элемент управления, согласно спецификации HTML Living Standard. Однако исторически это не всегда было так. Проверьте совместимость или используйте событие change вместо этого для элементов этих типов.

Для элементов <textarea> и <input>, принимающих текстовый ввод (type=text, type=tel, и т.д.), интерфейс — InputEvent; для других — Event.

Событие input срабатывает каждый раз, когда value элемента изменяется. Это отличается от события change, которое срабатывает только при подтверждении значения, например, при нажатии клавиши Enter или выборе значения из списка вариантов. Обратите внимание, что событие input не срабатывает, когда JavaScript программно изменяет value элемента.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите обработчик события.

addEventListener("input", (event) => {});

oninput = (event) => {};

Тип события

Объект InputEvent. Наследует от UIEvent.

Свойства события

Этот интерфейс наследует свойства от своих родительских элементов: UIEvent и Event.

InputEvent.data Только для чтения: Возвращает строку с вставленными символами. Может быть пустой строкой, если изменение не вставляет текст (например, при удалении символов).
InputEvent.dataTransfer Только для чтения: Возвращает объект DataTransfer, содержащий информацию о форматированном или простом тексте, добавляемом к редактируемому содержанию или удаляемом из него.
InputEvent.inputType Только для чтения: Возвращает тип изменения редактируемого содержимого, например, вставки, удаления или форматирования текста.
InputEvent.isComposing Только для чтения: Возвращает значение Boolean, указывающее, срабатывает ли событие после compositionstart и перед compositionend.

Примеры

В этом примере регистрируется значение всякий раз, когда вы изменяете значение элемента <input>.

HTML

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

JavaScript

const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Результат

Спецификации

Спецификация
События UI # event-type-input
HTML # handler-oninput

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`input_event`	1	79 12–79 Не поддерживается в `select`, `checkbox`, или `radio` полях ввода.	6	11.6	3.1	18	6	12	2	1.0	4.4

См. также

Связанные события

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event