HTML атрибут событий onchange

Значение и применение

Атрибут событий onchange позволяет задать срабатывание скрипта при изменении значений элемента.

Это событие аналогично событию oninput. Разница заключается в том, что событие oninput происходит сразу после того как значение элемента изменилось, а событие onchange происходит, когда элемент теряет фокус. Другим отличием является то, что событие onchange имеет более широкую поддержку браузерами и работает с такими элементами как <keygen>, <select> и более расширено с элементом <input>.

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

Спецификации: multipage, multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.HTMLElement.change_event
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
change event✓1✓12✓1✓9✓3✓18✓4✓10.1✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

HTML
<element onchange = "script" >

Примеры, попробуйте сами

Событие change

Нажмите ▶. Измените поле или выбор. Для текстового поля завершите редактирование, переведя фокус.

index.html
HTML
<input type="text" name="testInput" id="testInput" />
<p id="info2"></p>
main.js
JavaScript
function testFunction() {
    var x = document.getElementById('testInput').value
    document.getElementById('info2').innerHTML = 'Вы набрали следующий текст: ' + x
}

document.getElementById('testInput').addEventListener('change', testFunction)

Изменение выбора

Нажмите ▶. Измените поле или выбор. Для текстового поля завершите редактирование, переведя фокус.

index.html
HTML
<select id="wishlist">
  <option value="Желание 1">Желание 1</option>
  <option value="Желание 2">Желание 2</option>
  <option value="Желание 3">Желание 3</option>
</select>
<p id="info"></p>
main.js
JavaScript
function wishFunction() {
    var z = document.getElementById('wishlist').value
    document.getElementById('info').innerHTML = 'Вы выбрали: ' + z
}

document.getElementById('wishlist').addEventListener('change', wishFunction)

Двухмерный поворот элемента в CSS.

Нажмите ▶. Измените поле или выбор. Для текстового поля завершите редактирование, переведя фокус.

index.html
HTML
<p>Передвиньте бегунок для поворота элемента:</p>
<input type="range" min="-360" max="360" value="0" data-migration-change-0="" />
transform: rotate(<span id="result">0deg</span>);
<div id="test">Rotate me</div>
main.js
JavaScript
function rotate(value) {
    document.getElementById('test').style.transform = 'rotate(' + value + 'deg)'
    document.getElementById('result').innerHTML = value + 'deg'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-change-0]').addEventListener('change', function () {
    rotate(this.value)
})
document.querySelector('[data-migration-change-0]').removeAttribute('data-migration-change-0')
style.css
CSS
#test {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: khaki;
    border: 1px solid orange;
    transform: rotate(0deg);
}

Отличия HTML 4.01 от HTML 5

Нет.

Поддерживаемые теги

<input> (type = "checkbox | file | password | radio | range | search | text"), <keygen>, <select> и <textarea>.