Вы здесь: Главная » JavaScript » Обработка события onchange

Обработка события onchange

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

Обработка события onchahge для текстовых полей

Текстовые поля изменяются при вводе текста в них, но в отличие от события oninput, эти изменения для события onchange становятся заметны только после потери фокуса текстовым полем. В примере ниже вы можете набрать любой текст в поле, а затем нажать на кнопку с текстом "Проверить" или кликнуть в любом месте примера или страницы.  После этого набранный вами текст отобразится ниже поля ввода. Также можно нажать клавишу Enter.

Код примера приведен ниже:

Аналогичным способом мы можем обработать событие onchange для большого текстового поля (элемент <textarea>).  В примере ниже мы получим текст из этого поля с id="myArea" при нажатии на клавишу Tab, т.е. тоже при потере фокуса текстовым полем.

Нажми Tab, когда закончишь ввод текста

Обработка события onchahge для выпадающего списка

Задача у нас будет такая: нужно поменять картинку в теге img c id="picHolder", выбрав  ее из выпадающего списка по названию. Поскольку элемент <select> является "подчиненным", т.е. дочерним элементом тега <form>, то в html-разметке мы создадим соответствующие теги и зададим каждому из них атрибут name:

Элемент select в свою очередь является родительским контейнером для нескольких элементов <option>, которые и формируют пункты списка. В каждом из них есть атрибут value, в который мы запишем путь к картинкам из папки images. Именно этот атрибут и будет "главным действующим лицом" в нашем скрипте.

Событие onchange наступает для списка, когда пользователь выбирает другой пункт. В этот момент мы можем назначить в src картинки, обратившись к ней по id (picHolder) значение атрибута value списка, подхватываемого им из выбранного элемента option. Обращение к самому списку происходит в виде name_формы.name_списка. Получаем такой несложный скрипт:

Чашка с котом

Обработка события onchahge для полей с типом number

Поле с типом number изменяется при вводе значения вручную или при клике по стрелочкам этого поля. Если вы вводите цифры вручную, то нужно нажать клавишу Enter или увести фокус на другой элемент. Можно, например, нажать клавишу Tab.

В качестве примера будем изменять ширину div-а с помощью поля для ввода чисел. В этом поле мы можем указать минимальное (min), максимальное (max), текущее значение (value) и шаг приращения/уменьшения числа (step). При обработке события onchange нам понадобится изменения атрибута и js-свойства value:

Проверяем результат.

Обработка события onchahge для полей с типом range

Для ползунков (элементы типа <input type="range">) событие onchange наступает при перемещении ползунка. У этого элемента такие же атрибуты, как и у поля для ввода чисел (<input type="number">). При обработке события onchange нам понадобится значение ползунка, которое мы получаем с помощью его атрибута и js-свойства value.  Для того, чтобы видеть числовое значение value ползунка, мы выведем его в span с id="rangeInfo" внутри элемента label для ползунка.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *