Html input onchange example

Изменение: change, input, cut, copy, paste

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/events-change-input.

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

Событие change

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

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

Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие onchange .

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

В IE8- checkbox/radio при изменении мышью не инициируют событие сразу, а ждут потери фокуса.

Для того, чтобы видеть изменения checkbox/radio тут же – в IE8- нужно повесить обработчик на событие click (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием propertychange , описанным далее.

Событие input

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

В IE9 оно поддерживается частично, а именно – не возникает при удалении символов (как и onpropertychange ).

Пример использования (не работает в IE8-):

В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.

Если бы ещё не проблемы со старыми IE… Впрочем, их можно решить при помощи события propertychange .

IE10-, событие propertychange

Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования – исправление недочётов обработки событий в старых IE.

Если поставить его на checkbox в IE8-, то получится «правильное» событие change :

 Чекбокс с "onchange", работающим везде одинаково  

Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо oninput .

К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания onpropertychange + oninput недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.

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

Эти события используются редко. Они происходят при вырезании/вставке/копировании значения.

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

Пример: поле с контролем СМС

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

Посмотрим, как их использовать, на примере.

Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.

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

IE9-

В IE8- событие input не поддерживается, но, как мы видели ранее, есть onpropertychange , которое может заменить его.

Что же касается IE9 – там поддерживаются и input и onpropertychange , но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи keyup на Delete и BackSpace . А вот удаление командой «вырезать» из меню – сможет отловить лишь oncut .

Получается вот такая комбинация:

 sms.onkeyup = sms.oninput = showCount; sms.onpropertychange = function() < if (event.propertyName == "value") showCount(); >sms.oncut = function() < setTimeout(showCount, 0); // на момент oncut значение ещё старое >; 

Здесь мы добавили вызов showCount на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи throttle -декоратора, описанного в задаче Тормозящий (throttling) декоратор.

Есть и совсем другой простой, но действенный вариант: через setInterval регулярно проверять значение и, если оно слишком длинное, обрезать его.

Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по onfocus , а прекращать – по onblur , вот так:

 >, 20); >; sms.onblur = function() < clearInterval(timerId); >; function showCount() 

Обратим внимание – весь этот «танец с бубном» нужен только для поддержки IE8-, в которых не поддерживается oninput и IE9, где oninput не работает при удалении.

Итого

Событие	Описание	Особенности
change	Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.	В IE8- на чекбоксах ждёт потери фокуса, поэтому для мгновенной реакции ставят также onclick -обработчик или onpropertychange .
input	Событие срабатывает только на текстовых элементах. Оно не ждёт потери фокуса, в отличие от change .	В IE8- не поддерживается, в IE9 не работает при удалении символов.
propertychange	Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в event.propertyName . Используют для мгновенной реакции на изменение значения в старых IE.	В IE9 не срабатывает при удалении символов.
cut/copy/paste	Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт.	Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.

Ещё особенность: в IE8- события change , propertychange , cut и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.

Задачи

Автовычисление процентов по вкладу

Создайте интерфейс для автоматического вычисления процентов по вкладу.

Ставка фиксирована: 12% годовых. При включённом поле «капитализация» – проценты приплюсовываются к сумме вклада каждый месяц (сложный процент).

• В поле с суммой должно быть нельзя ввести не-цифру. При этом пусть в нём работают специальные клавиши и сочетания Ctrl-X/Ctrl-V.
• Изменения в форме отражаются в результатах сразу.

Только численный ввод в поле с суммой разрешаем, повесив обработчик на keypress .

Отслеживаем события изменения для перевычисления результатов:

• На input : событие input и дополнительно propertychange/keyup для совместимости со старыми IE.
• На checkbox : событие click вместо change для совместимости с IE8-.
• На select : событие change .

Комментарии

• Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
• Для одной строки кода используйте тег , для нескольких строк кода — тег , если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
• Если что-то непонятно в статье — пишите, что именно и с какого места.

Источник

Событие onchange / событие change

Событие onchange JavaScript происходит, когда изменяется первоначальное состояние или содержимое элемента. В некоторых случаях событие возникает, когда элемент выходит из фокуса ввода.

Как зарегистрировать

В HTML

 (IE, Google Chrome, Firefox, Opera, Safari)

В JavaScript

object.onchange = handler; (IE, Google Chrome, Firefox, Opera, Safari). object.addEventListener ("change", handler, useCapture); (IE - с версии 9, Google Chrome, Firefox, Opera, Safari). object.attachEvent ("onchange", handler); (IE, Opera)

Объект event доступен для всех обработчиков событий во всех браузерах. Его свойства содержат дополнительную информацию о текущем событии.

Событие работает по-разному для разных элементов:

• JavaScript select onchange — событие onchange происходит, когда изменяется выделение;
• input:checkbox и input:radio — в Firefox , Opera , Google Chrome и Safari : событие onchange происходит, когда изменяется состояние выбора. В Internet Explorer – когда элемент выходит из фокуса ввода и когда изменяется его состояние.

Для реализации кроссбраузерности, чтобы определить, когда изменилось состояние элемента, используйте событие onclick :

• textarea, input:password, input:search и input:text — событие onchange происходит, когда элемент выходит из фокуса ввода и когда его содержимое изменилось. Чтобы определить, когда изменилось содержимое, используйте в Internet Explorer событие onpropertychange , а в Firefox , Opera , Google Chrome и Safari ( в Internet Explorer , начиная с версии 9 ) — событие oninput . В Google Chrome , Safari и Internet Explorer , начиная с версии 9 , также может использоваться событие textInput ;
• input:file — событие onchange JavaScript происходит, когда изменилось содержимое. Если пользователь в Internet Explorer вводит путь ( не используя кнопку «Обзор» ), то событие onchange происходит, когда элемент выходит из фокуса ввода. Поэтому в Internet Explorer используйте событие onpropertychange ;
• input:range — событие onchange происходит, когда изменилось значение элемента.

Пример HTML-кода 1

Этот пример иллюстрирует использование события onchange для элемента select :

  function OnSelectionChange (select) Select an item from the following list: 
 Apple Pear Peach 

Пример HTML-кода 2

В этом примере используется событие onchange JavaScript и объект Date , чтобы вычислить время, прошедшее между двумя заданными значениями:

    h: m: - h: m: 
 
Elapsed time in mins: 

onchange JavaScript поддерживается объектами :

input:checkbox, input:file, input:password, input:radio, input:range, input:search, input:text, keygen, select, textarea.

Вадим Дворников автор-переводчик статьи « onchange event / change event »

Пожалуйста, оставляйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!

Источник

Onchange Event in JavaScript

The onchange is an event attribute. We can listen to the change event to perform the operation based on any change and the onchange attribute is used to associate the functionality for this event. The event is triggered whenever the value of the HTML element changes. The term value differs for several elements like, for input element the value is entered text, for select element the value is selected option, etc.

Syntax of Onchange Event in JavaScript

There are three main ways to specify this event in syntax. We’ll go through each in turn.

Writing Onchange Event Attribute

Association of Events with the HTML Element

Select Element Object and then Attach Function to onchange Property

How does Onchange event in JavaScript work?

The onchange in javascript is an event attribute, and we write it inside the tag of the HTML element. The change in the value of an element triggers the change event, and subsequently, a function associated with the event gets executed in which we can perform some state manipulation to reflect the corresponding changes in the Document Object Model according to the last user interaction.

This event attribute falls into the category of Form Events. That’s why onchange is used with form controls, like input, select, checkbox, radio buttons, etc. The Javascript listens for user input and fires this event whenever a value gets updated.

The onchange event attribute fires the event when the element loses focus.

Note: If there is a need to fire an event immediately after the change, then we should use the oninput event attribute.

Examples

In these examples, we are associating a function with the onchange event attribute. When the element’s value is updated, and the element loses focus, the change event is fired, and subsequently, onchange triggers the execution of corresponding functionality.

Onchange with Text Input Element

Onchange with Select Element

Onchange with Radio Buttons

Browser Compatibility

The onchange event attribute is supported by all major browsers like Chrome, Internet Explorer, Firefox, Safari, Opera, Edge, etc.

Conclusion

• onchange is an event attribute.
• It is used to associate functionality with being executed whenever the change event occurs.
• A point worth noticing is, the event only gets fired when the element loses focus.

Источник