Опубликовано: 01.04.2011 Последняя правка: 08.12.2015
HTMLXHTML
IEChromeFireFoxOperaSafari

Событие 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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа