По сути название события onchange
происходит при изменении каких-либо данных в полях формы. Следует учитывать, что событие onchange
наступает далеко не для всех элементов формы, поэтому и обработка его выполняется для:
- текстовых полей при потере фокуса после изменения значения
- выпадающих списков (select)
- полей для ввода чисел (number)
- ползунков (range)
- флажков (checkbox)
Обработка события onchahge для текстовых полей
Текстовые поля изменяются при вводе текста в них, но в отличие от события oninput
, эти изменения для события onchange
становятся заметны только после потери фокуса текстовым полем. В примере ниже вы можете набрать любой текст в поле, а затем нажать на кнопку с текстом "Проверить" или кликнуть в любом месте примера или страницы. После этого набранный вами текст отобразится ниже поля ввода. Также можно нажать клавишу Enter
или Tab
.
Код примера приведен ниже:
1 2 3 4 5 6 7 8 9 | <input id="myText" type="text" value=""> <input type="button" class="btn btn-primary" value="Проверить"> <div id="output"></div> <script> myText.onchange = function(){ output.innerHTML = this.value; } </script> |
Аналогичным способом мы можем обработать событие onchange для большого текстового поля (элемент <textarea>
). В примере ниже мы получим текст из этого поля с id="myArea"
при нажатии на клавишу Tab
, т.е. тоже при потере фокуса текстовым полем.
1 2 3 4 5 6 7 8 9 10 11 | <label for="myArea">Обработка события onchange для textarea</label> <textarea id="myArea" rows="5" cols="20"></textarea> <div id="outputArea" style="padding: 5px; margin: 10px 0"> Нажми Tab, когда закончишь ввод текста</div> <script> myArea.onchange = function(){ outputArea.innerHTML = "Введен текст: "+this.value; } </script> |
Обработка события onchahge для выпадающего списка
Задача у нас будет такая: нужно поменять картинку в теге img c id="picHolder"
, выбрав ее из выпадающего списка по названию. Поскольку элемент <select>
является "подчиненным", т.е. дочерним элементом тега <form>
, то в html-разметке мы создадим соответствующие теги и зададим каждому из них атрибут name:
1 2 3 4 5 6 7 8 9 | <img id="picHolder" src="wp-content/uploads/examples/js-examples/cups/cup1.jpg" alt="Чашка с котом"> <form name="picForm"> <select name="picSelect"> <option value="images/cup1.jpg">Кот-выпивоха</option> <option value="images/cup2.jpg">Удивленный кот</option> <option value="images/cup3.jpg">Кот в очках с галстуком</option> <option value="images/cup4.png">Чашка с овцой</option> </select> </form> |
Элемент select
в свою очередь является родительским контейнером для нескольких элементов <option>
, которые и формируют пункты списка. В каждом из них есть атрибут value
, в который мы запишем путь к картинкам из папки images. Именно этот атрибут и будет "главным действующим лицом" в нашем скрипте.
Событие onchange наступает для списка, когда пользователь выбирает другой пункт. В этот момент мы можем назначить в src
картинки, обратившись к ней по id
(picHolder) значение атрибута value
списка, подхватываемого им из выбранного элемента option
. Обращение к самому списку происходит в виде name_формы.name_списка
. Получаем такой несложный скрипт:
1 2 3 4 5 | <script> picForm.picSelect.onchange = function(){ picHolder.src = this.value; } </script> |

Обработка события onchahge для полей с типом number
Поле с типом number
изменяется при вводе значения вручную или при клике по стрелочкам этого поля. Если вы вводите цифры вручную, то нужно нажать клавишу Enter
или увести фокус на другой элемент. Можно, например, нажать клавишу Tab
.
В качестве примера будем изменять ширину div-а
с помощью поля для ввода чисел. В этом поле мы можем указать минимальное (min
), максимальное (max
), текущее значение (value
) и шаг приращения/уменьшения числа (step
). При обработке события onchange
нам понадобится изменения атрибута и js-свойства value
:
1 2 3 4 5 6 7 8 9 10 11 | <label for="myNumber">Меняем ширину блока</label> <input id="myNumber" type="number" value="200" min="50" max="400" step="50"> <div id="myBox" style="width: 200px; height: 200px; margin: 15px; background: pink; border: 3px double #ee5757"></div> <script> myNumber.onchange = function(){ myBox.style.width = this.value +"px"; } </script> |
Проверяем результат.
Обработка события onchahge для полей с типом range
Для ползунков (элементы типа <input type="range">
) событие onchange наступает при перемещении ползунка. У этого элемента такие же атрибуты, как и у поля для ввода чисел (<input type="number">
). При обработке события onchange нам понадобится значение ползунка, которое мы получаем с помощью его атрибута и js-свойства value
. Для того, чтобы видеть числовое значение value
ползунка, мы выведем его в span с id="rangeInfo"
внутри элемента label
для ползунка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <label for="myRange">Меняем координату блока <span id="rangeInfo" style="color: lightgreen">left: 0</span></label> <input id="myRange" type="range" value="0" min="0" max="300" step="20" style="width: 180px; margin-bottom: 15px;"> <div id="myCircle" style="width: 100px; height: 100px; border-radius: 50%; margin: 15px; background: lightgreen; border: 3px double #57ff57; position: absolute; left:0;"></div> <script> myRange.onchange = function(){ myCircle.style.left = this.value +"px"; rangeInfo.innerHTML = "left: "+ this.value +"px"; } </script> |
Обратите внимание, что событие onchange наступает для ползунка и при прокрутке колесика мыши, но первоначально этот элемент должен получить фокус.
Обработка события onchange для поля с типом checkbox
Для флажков (<input type="checkbox">
) тоже можно обработать событие onchange
. В примере ниже от Jon Kantner показано, как можно изменить внешний вид флажка, просто задав ему другой класс по событию onchange и использовав анимацию типа @keyframes
.
See the Pen Pill Switch 💊 by Elen (@ambassador) on CodePen.18892
Добрый день,подскажите пожалуйста,как реализовать такой пример :
У нас есть выпадающий список select и внутри него варианты с числами и последний вариант "Выбрать другое", по нажатию на "Выбрать другое" под списком должен появиться инпут куда пользователь может ввести свой вариант.
Спасибо за любую помощь)
День добрый.
Достаточно просто. Использую атрибут
hidden
для того, чтобы скрыватьinput
ниже списка.Разметка:
В скрипте идет привязка к
id
select-а
иinput-а
, т.к. непонятно, нужна ли вам форма для отправки данных или просто для получения одного значения.