Событие onchange
Событие onchange — это атрибут HTML-тегов, который применяется для вызова скрипта (напр. JavaScript), когда изменяется значение элемента либо когда элемент теряет фокус при условии, что его значение с момента получения фокуса изменилось.
Первый вариант события onchange возникает при изменении состояний флажков (checkbox), переключателей (radio) и выбора опций выпадающего списка (<SELECT>). Второй — при изменении текста в различных текстовых полях ввода с последующей потерей фокуса. Эта потеря может быть осуществлена многими способами: пользователь кликнул мышкой на зону вне элемента, сделал табуляцию или нажал «горячие клавиши», перейдя к другому элементу страницы. Также следствием расфокусировки может быть другой сработавший скрипт, например использующий метод blur или focus.
Тип события
Назначение: служит для вызова скриптов при взаимодействии пользователя с элементами HTML-страницы.
Применяется: в HTML 4.01 и XHTML к тегам <INPUT>, <SELECT>, <TEXTAREA>.
В HTML 5 событие onchange может использоваться практически со всеми тегами.
Значения
Значением события onchange является код скрипта заключенный в двойные или одинарные кавычки, причем, если применяются двойные кавычки, то внутри тела скрипта можно указывать только одинарные и наоборот.
Значение по умолчанию: нет.
Синтаксис
<textarea rows="..." cols="..." onchange="скрипт">текст</textarea>
<select onchange="скрипт">...</select>
<input onchange="скрипт">Обязательный атрибут: нет.
Пример HTML: применение события onchange к тегу SELECT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тег SELECT, событие onchange</title>
<style type="text/css">
.image {
width: 200px; /* ширина блока с картинками */
height: 200px; /* высота */
position: absolute; /* абсолютное позиционирование */
left: 150px; /* смещение от левого края */
top: 10px; /* смещение от верха */
border: 1px #cc6633 solid; /* стили рамки */
}
</style>
</head>
<body>
<div>
<select onchange="document.getElementById('image').src=this.value">
<option value="none">Шоколадки</option>
<option value="images/cat.png">Кошка</option>
<option value="images/dog.png">Собачка</option>
<option value="images/rabbit.png">Кролик</option>
</select>
</div>
<div class="image"><img id="image" src="#" alt=""></div>
</body>
</html>Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |