Javascript input событие при вводе

События формы

В прошлой теме рассматривались события, возникающие при нажатии клавиш. В этой теме мы рассмотрим другие события формы. В том числе отправку формы на сервер.

Элемент в фокусе

Когда элемент формы оказывается в фокусе, возникает событие focus , а когда элемент выходит из фокуса, срабатывает событие blur . Создадим поле для ввода и выведем в консоль текст при получении им фокуса и при выходе из фокуса:

let input = document.getElementById('inp'); input.onfocus = function() < console.log('Элемент в фокусе'); >; input.onblur = function() < console.log('Элемент вышел из фокуса'); >;

Нет смысла в использовании этих событий для изменения стиля элемента. Для этого в CSS существует псевдокласс focus.

Ввод значения

Событие input возникает, когда пользователь печатает текст в поле для ввода. Оно срабатывает при добавлении или удалении каждого символа, а также при копировании текста в поле для ввода. В некоторых браузерах оно работает необычно: при каждом вводе символа создаётся событие blur , после этого выполняется обработчик события input , а потом создаётся событие focus . Если обработчиков событий focus и blur нет, то в этом нет проблемы. Но если они есть, то они будут срабатывать при каждом добавлении символа.

Добавим на страницу ещё один тэг и выведем его значение при вводе текста:

let newInput = document.getElementById('new_inp'); newInput.oninput = function() < console.log('Введено значение: ' + newInput.value); >;

Изменение значения

Событие change возникает при изменении значения элемента. У полей для ввода оно срабатывает только при выходе из фокуса. У других типов оно срабатывает при клике на элементе. Добавим на страницу тэг и назначим ему обработчик события change :

let newv = document.getElementById('new_value'); newv.onchange = function() < console.log('Значение изменено на: ' + newv.value); >;

Отправка формы

Событие submit срабатывает при отправке формы на сервер. Оно используется для проверки данных, которые пользователь ввёл в форму. Если какие-то значения введены неправильно, то делается отмена отправки формы. При этом обычно выводится сообщение, в котором указывается, что нужно исправить.

Поместим созданные тэги в форму и добавим кнопку отправки формы:

Теперь установим форме обработчик события submit . В нём будут проверяться элементы формы. Если хотя бы в одном из полей введено менее двух символов, то форма отправлена не будет.

let form = document.querySelector('form'); form.onsubmit = function() < if (input.value.length < 2 || newInput.value.length < 2 || newv.value.length < 2) < alert('Слишком короткие значения'); return false; >>;

В предыдущих примерах элементы формы уже были найдны, поэтому в обработчике повторный поиск не производится.

Если форма заполнена правильно, то браузер попытается запустить файл, указанный в атрибуте action , и возникнет ошибка, потому что такого файла нет. Но в этом нет никакого риска, поэтому не нужно опасаться проверять работу скрипта. Если в одном из полей введено менее двух символов, то появится сообщение и отправка будет отменена. Если проверок много, то можно для каждой проверки выводить своё сообщение и отменять отправку формы.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены

Источник

HTMLElement: input event

The input event fires when the value of an , , or element has been changed.

The event also applies to elements with contenteditable enabled, and to any element when designMode is turned on. In the case of contenteditable and designMode , the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn’t editable.

For elements with type=checkbox or type=radio , the input event should fire whenever a user toggles the control, per the HTML Living Standard specification. However, historically this has not always been the case. Check compatibility, or use the change event instead for elements of these types.

Note: The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("input", (event) => >); oninput = (event) => >; 

Event type

Examples

This example logs the value whenever you change the value of the element.

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; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

input

Input — событие, срабатывающее каждый раз при изменении значения.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.

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

Простой пример

Скопировать ссылку «Простой пример» Скопировано

 Введите текст: При каждом изменении возникает событие input:   var inputTextField = document.getElementById('textField'); var outputTextField = document.getElementById('textResult'); inputTextField.oninput = function()  outputTextField.value = inputTextField.value; >;  label>Введите текст: input type="text" id="textField"> label> label>При каждом изменении возникает событие code>inputcode>: textarea disabled id="textResult">textarea> label> script> var inputTextField = document.getElementById('textField'); var outputTextField = document.getElementById('textResult'); inputTextField.oninput = function()  outputTextField.value = inputTextField.value; >; script>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 const textInput = document.querySelector('input[type=text]'); function callback(evt)  console.log(`Произошло событие $`);> textInput.addEventListener('input', callback); /* Если теперь ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: 4 раза: Произошло событие input*/ const textInput = document.querySelector('input[type=text]'); function callback(evt)  console.log(`Произошло событие $evt.type>`); > textInput.addEventListener('input', callback); /* Если теперь ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: 4 раза: Произошло событие input */    Скопировать Скопировано Не удалось скопировать   

Отличие от события change

Скопировать ссылку «Отличие от события change» Скопировано

События input и change похожи — оба помогают отслеживать изменения в полях ввода.

Различие есть для текстовых полей ввода:

• input — срабатывает при каждом изменении значения в поле;
• change — срабатывает когда изменяемый элемент теряет фокус: например, при переходе к другому полю или клику на другую часть страницы.

Для прочих полей ввода они работают одинаково:

 Кликните: Типы событий:   const checkbox = document.querySelector('[name=checkbox-input]'); const textArea = document.querySelector('[name=checkbox-result]'); function handleCheckboxChange(evt)  textArea.value += evt.type + '; '; > checkbox.addEventListener('input', handleCheckboxChange); checkbox.addEventListener('change', handleCheckboxChange);  label>Кликните: input type="checkbox" name="checkbox-input"> label> label>Типы событий: textarea disabled name="checkbox-result">textarea> label> script> const checkbox = document.querySelector('[name=checkbox-input]'); const textArea = document.querySelector('[name=checkbox-result]'); function handleCheckboxChange(evt)  textArea.value += evt.type + '; '; > checkbox.addEventListener('input', handleCheckboxChange); checkbox.addEventListener('change', handleCheckboxChange); script>    Скопировать Скопировано Не удалось скопировать   

Примечания

Скопировать ссылку «Примечания» Скопировано

• если текст не меняется, например при нажатиях клавиш влево ⇦ , вправо ⇨ , Control , Alt , Shift ;
• если тег имеет атрибут type = «button» или type = «submit» ;
• если поле изменит не пользователь, а код JS. Чтобы в этом случае получить событие input нужны дополнительные действия, например использовать dispatch Event ( ) .

Источник

События: change, input, cut, copy, paste

Давайте рассмотрим различные события, сопутствующие обновлению данных.

Событие: change

Событие change срабатывает по окончании изменения элемента.

Для текстовых это означает, что событие происходит при потере фокуса.

Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие change :

Для других элементов: select , input type=checkbox/radio событие запускается сразу после изменения значения:

 Выберите что-нибудь Вариант 1 Вариант 2 Вариант 3 

Событие: input

Событие input срабатывает каждый раз при изменении значения.

В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.

Если мы хотим обрабатывать каждое изменение в , то это событие является лучшим выбором.

С другой стороны, событие input не происходит при вводе с клавиатуры или иных действиях, если при этом не меняется значение в текстовом поле, т.е. нажатия клавиш ⇦ , ⇨ и подобных при фокусе на текстовом поле не вызовут это событие.

Событие input происходит после изменения значения.

Поэтому мы не можем использовать event.preventDefault() там – будет уже слишком поздно, никакого эффекта не будет.

События: cut, copy, paste

Эти события происходят при вырезании/копировании/вставке данных.

Они относятся к классу ClipboardEvent и обеспечивают доступ к копируемым/вставляемым данным.

Мы также можем использовать event.preventDefault() для предотвращения действия по умолчанию, и в итоге ничего не скопируется/не вставится.

Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить:

Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его.

Существует список методов в спецификации для работы с различными типами данных, чтения/записи в буфер обмена.

Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя, к примеру, в обработчиках событий onclick .

Также запрещается генерировать «пользовательские» события буфера обмена при помощи dispatchEvent во всех браузерах, кроме Firefox.

Итого

Событие	Описание	Особенности
change	Значение было изменено.	Для текстовых полей срабатывает при потере фокуса.
input	Срабатывает при каждом изменении значения.	Запускается немедленно, в отличие от change .
cut/copy/paste	Действия по вырезанию/копированию/вставке.	Действие можно предотвратить. Свойство event.clipboardData предоставляет доступ на чтение/запись в буфер обмена…

Задачи

Депозитный калькулятор

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

Любое изменение введённых данных должно быть обработано немедленно.

// initial: начальная сумма денег // interest: проценты, например, 0.05 означает 5% в год // years: сколько лет ждать let result = Math.round(initial * (1 + interest) ** years);

Источник