События input html – События и перехватчики для полей формы в javascript

Содержание

change, input, cut, copy, paste

На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.

Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.

Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.

Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие onchange.

<input type="text" onchange="alert(this.value)">
<input type="button" value="Кнопка">

Для остальных же элементов: select, input type=checkbox/radio оно срабатывает сразу при выборе значения.

В IE8- checkbox/radio при изменении мышью не инициируют событие сразу, а ждут потери фокуса.

Для того, чтобы видеть изменения checkbox/radio тут же – в IE8- нужно повесить обработчик на событие click (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием

propertychange, описанным далее.

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

В IE9 оно поддерживается частично, а именно – не возникает при удалении символов (как и onpropertychange).

Пример использования (не работает в IE8-):

<input type="text"> oninput: <span></span>
<script>
  var input = document.body.children[0];

  input.oninput = function() {
    document.getElementById('result').innerHTML = input.value;
  };
</script>

В современных браузерах oninput – самое главное событие для р

HTML События



События HTML — это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких, как JavaScript и вызываемых, когда на странице происходит какое-либо действие. События позволяют сделать вашу страницу динамической.

Атрибуты событий окна

События, вызываемые на объект окна (применяются с тегом <body>):


HTML Атрибуты событий окна

Атрибут Значение Описание
onafterprint script Скрипт срабатывает после того, как документ будет напечатан
onbeforeprint script Скрипт выполняется перед распечаткой документа
onbeforeunload script Скрипт срабатывает до загрузки документа
onerror script Скрипт срабатывает, при возникновении ошибки
onhashchange script Скрипт срабатывает при изменении в названии #якоря из текущего URL-адреса
onload script Скрипт запустится после завершения полной загрузки страницы
onmessage script Скрипт выполняется при срабатывании сообщения
onoffline script Скрипт срабатывает, когда браузер начинает работать в автономном режиме
ononline script Скрипт срабатывает, когда браузер начинает работать онлайн
onpagehide script Скрипт срабатывает, когда пользователь покидает страницу
onpageshow script Скрипт срабатывает, когда пользователь переходит на страницу
onpopstate script Скрипт срабатывает при изменении окна истории
onresize script Скрипт срабатывает, когда окно браузера изменяется
onstorage script Скрипт срабатывает, когда веб-хранилище данных обновляется
onunload script Скрипт срабатывает при выходе пользователя из документа

События формы

События срабатывают на действия внутри HTML формы (могут применяться почти ко всем элементам HTML, но чаще всего применяются к элементам формы):

HTML Атрибуты событий формы

Атрибут Значение Описание
onblur script Скрипт срабатывает, когда элемент теряет фокус
onchange script Скрипт срабатывает при изменении значений элемента
oncontextmenu script Скрипт срабатывает при вызове контекстного меню
onfocus script Скрипт срабатывает, когда элемент получает фокус
oninput script Скрипт срабатывает, когда элемент получает ввод данных от пользователя
oninvalid script Скрипт срабатывает, когда элемент станет недействителен
onreset script Скрипт срабатывает при сбросе формы
onsearch script Скрипт срабатывает, когда пользователь пишет что-то в поле поиска (для <input="search">)
onselect script Скрипт срабатывает при выделении текста в элементе
onsubmit script Скрипт срабатывает при отправке формы

События клавиатуры

События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):

HTML Атрибуты событий клавиатуры

Атрибут Значение Описание
onkeydown script Скрипт срабатывает, когда пользователь нажимает на клавишу
onkeypress script Скрипт срабатывает после того, как пользователь нажал на клавишу
onkeyup script Скрипт срабатывает после того, как нажатая клавиша была отпущена

События мыши

События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML):

HTML Атрибуты событий мыши

Атрибут Значение Описание
onclick script Скрипт срабатывает при клике левой кнопки мыши на элементе
ondblclick script Скрипт срабатывает после двойного клика мыши на элементе
ondrag script Скрипт срабатывает при перетаскивании элемента
ondragend script Скрипт срабатывает после операции перетаскивания
ondragenter script Скрипт срабатывает, когда элемент будет перенесен на заданную зону (цель для переноса)
ondragleave script Скрипт срабатывает, когда элемент выходит из допустимой зоны для переноса
ondragover script Скрипт срабатывает, когда элемент перемещают над допустимой зоной для переноса
ondragstart script Скрипт срабатывает, когда пользователь начинает перетаскивать элемент
ondrop script Скрипт срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания
onmousedown script Скрипт срабатывает при нажатии кнопки мыши на элементе
onmousemove script Скрипт срабатывает, пока указатель мыши перемещается над элементом
onmouseout script Скрипт срабатывает, когда указатель мыши перемещается за пределы элемента
onmouseover script Скрипт срабатывает, когда указатель мыши начал перемещаться над элементом
onmouseup script Скрипт срабатывает при отпускании кнопки мыши с элемента
onmousewheel script Устарел в HTML5. Используйте атрибут onwheel
onscroll script Скрипт срабатывает во время прокручивания полосы прокрутки элемента
onwheel script Скрипт срабатывает при использовании колеса мыши на элементе

События буфера обмена

Атрибут Значение Описание
oncopy script Скрипт срабатывает, когда пользователь копирует содержимое элемента
oncut script Скрипт срабатывает, когда пользователь вырезает содержимое элемента
onpaste script Скрипт срабатывает, когда пользователь вставляет содержимое в элемент

События медиа-файлов

События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object>, and <video>):

HTML Атрибуты событий медиа-файлов

Атрибут Значение Описание
onabort script Скрипт срабатывает при прерывании
oncanplay script Скрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать)
oncanplaythrough script Скрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации
oncuechange script Скрипт, который будет запускаться, когда изменения метки в элементе <track>
ondurationchange script Скрипт срабатывает при изменении длины продолжительности медиа файла
onemptied script ScСкрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом)
onended script Скрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр)
onerror script Скрипт срабатывает, если возникнет ошибка при загрузке файла
onloadeddata script Скрипт срабатывает при загрузке данных медиа файла
onloadedmetadata script Скрипт срабатывает, когда загружены мета-данные (например размер и продолжительность)
onloadstart script Скрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле
onpause script Скрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно
onplay script Script to be run when the media is ready to start playing
onplaying script Скрипт срабатывает, когда файл готов начать воспроизводиться
onprogress script Скрипт срабатывает, когда браузер находится в процессе получения данных медиа файла
onratechange script Скрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки)
onseeked script Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение "false", т.е.текущая позиция воспроизведения найдена
onseeking script Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение "true", т.е. текущая позиция воспроизведения перемещается
onstalled script Скрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине
onsuspend script Скрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине
ontimeupdate script Скрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения)
onvolumechange script
Скрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука)
onwaiting script Скрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных)

Прочие события

Атрибут Значение Описание
onerror script Скрипт срабатывает, когда происходит ошибка во время загрузки внешнего файла
onshow script Скрипт срабатывает, когда элемент <menu> отображается как контекстное меню
ontoggle script Скрипт срабатывает, когда пользователь открывает или закрывает элемент <details>

Атрибут событий oninput | HTML справочник

Атрибуты событий

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

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

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

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

Синтаксис

<element oninput = "script" >

Пример использования

Пример вывода текста, набранного в элементе <input> на "лету", используя атрибут событий oninput. Обратите внимание, что если бы мы использовали атрибут событий onchange, то текст отобразился бы только при смене фокуса целиком.

<!DOCTYPE html>
<html>
<head>
<title>Событие oninput</title>
</head>
<body>
<p>Набирите произвольный текст:</p>
<input type = "text" name = "testInput" id = "testInput" oninput = "testFunction()">
<p id = "info" ></p>
<script>
function testFunction() {
	var x = document.getElementById("testInput").value;
	document.getElementById("info").innerHTML = "Вы набираете следующий текст: " + x;
}
</script>
</body>
</html>

Набирите произвольный текст:


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

Атрибут событий oninput является новым в HTML5.

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

<input> (type = "password | search | text") и <textarea>.

Атрибуты событий

Атрибуты событий | HTML справочник

АтрибутОписание
Chrome

Firefox

Opera

Safari

IExplorer

Edge
onabortСкрипт срабатывает при прерывании.ДаДаДаДа9.0Да
oncanplayСкрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать).ДаДаДаДа9.0Да
oncanplaythroughСкрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации.ДаДаДаДа9.0Да
ondurationchangeСкрипт срабатывает при изменении длины продолжительности медиа файла.ДаДаДаДа9.0Да
onemptiedСкрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом).ДаДаДаДа9.0Да
onendedСкрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр).ДаДаДаДа9.0Да
onerrorСкрипт срабатывает, если возникнет ошибка при загрузке файла.ДаДаДаДа9.0Да
onloadeddataСкрипт срабатывает при загрузке данных медиа файла.ДаДаДаДа9.0Да
onloadedmetadataСкрипт срабатывает, когда загружены мета-данные (например размер и продолжительность).ДаДаДаДа9.0Да
onloadstartСкрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле.ДаДаДаДа9.0Да
onpauseСкрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно.ДаДаДаДа9.0Да
onplayСкрипт срабатывает, когда файл готов начать воспроизводиться.ДаДаДаДа9.0Да
onplayingСкрипт срабатывает при воспроизведении файла.ДаДаДаДа9.0Да
onprogressСкрипт срабатывает, когда браузер находится в процессе получения данных медиа файла.ДаДаДаДа9.0Да
onratechangeСкрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки).ДаДаДаДа9.0Да
onseekedСкрипт срабатывает, когда атрибут object.seeking у тегов <audio> или <video> имеет значение "false" (пользователь не переходит на новые позиции воспроизведения - окончание "перемотки").ДаДаДаДа9.0Да
onseekingСкрипт срабатывает, когда атрибут object.seeking у тегов <audio> или <video> имеет значение "true" (пользователь переходит к новой позиции воспроизведения - "перемотка").ДаДаДаДа9.0Да
onstalledСкрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине.ДаДаДаДа9.0Да
onsuspendСкрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине.ДаДаДаДа9.0Да
ontimeupdateСкрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения).ДаДаДаДа9.0Да
onvolumechangeСкрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука).ДаДаДаДа9.0Да
onwaitingСкрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных).ДаДаДаДа9.0Да

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

События HTML 5 - это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких, как JavaScript и вызываемых, когда на странице происходит какое-либо действие. События позволяют сделать вашу страницу динамической.

Атрибуты событий окна

События, вызываемые на объект окна (применяются с тегом <body>):

Атрибут Описание
onafterprint Скрипт запустится после того, как документ будет распечатан.
onbeforeprint Скрипт запустится прежде, чем документ будет распечатан.
onbeforeonload Скрипт запустится до загрузки документа.
onblur Скрипт запустится, когда окно потеряет фокус.
onerror Скрипт запустится, если произойдет ошибка.
onfocus Скрипт запустится, когда окно получит фокус.
onhaschange Скрипт запустится, после изменения документа.
onload Код события будет выполнен после полной загрузки страницы, т.е. когда всё содержимое веб-страницы полностью загружено, включая изображения, внешние таблицы стилей и внешние скрипты.
onmessage Скрипт запустится при срабатывании сообщения.
onoffline Скрипт запустится, когда документ перейдет в автономный режим.
ononline Скрипт запустится, когда документ войдет в сеть.
onpagehide Скрипт запустится, когда окно будет скрыто.
onpageshow Скрипт запустится, когда окно станет видимым.
onpopstate Скрипт запустится при изменении окна истории.
onredo Скрипт запустится, когда документ начнет выполнять повтор.
onresize Скрипт запустится при изменении размеров окна.
onstorage Скрипт запустится при загрузке документа.
onundo Скрипт запустится при выполнении команды отменить в документе.
onunload Скрипт запустится при выходе пользователя из документа.

События формы

События срабатывают на действия внутри HTML формы (могут применяться ко всем элементам HTML, но чаще всего применяются к элементам формы):

Атрибут Описание
onblur Скрипт запустится, когда элемент потеряет фокус.
onchange Скрипт запустится при изменении элемента.
oncontextmenu Скрипт запустится при вызове контекстного меню.
onfocus Скрипт запустится, когда элемент получит фокус.
onformchange Скрипт запустится при изменении формы.
onforminput Скрипт запустится, когда пользователь будет вводить данные в форму.
oninput Скрипт запустится, когда элемент станет получать пользовательский ввод.
oninvalid Скрипт запустится, когда элемент станет недействителен.
onselect Скрипт запустится при выборе элемента.
onsubmit Скрипт запустится при отправке формы.

События клавиатуры

События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):

Атрибут Описание
onkeydown Скрипт запустится, когда будет нажата клавиша.
onkeypress Скрипт запустится после того, как клавиша была нажата и отпущена.
onkeyup Скрипт запустится при отпускании клавиши.

События мыши

События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML):

Атрибут Описание
onclick Код события будет выполнен по клику левой кнопкой мыши на элементе.
ondblclick Скрипт запустится после двойного клика мыши.
ondrag Скрипт запустится при перетаскивании элемента.
ondragend Скрипт запустится после операции перетаскивания.
ondragenter Скрипт запустится, когда элемент будет перенесен на допустимую зону падения.
ondragleave Скрипт запустится, когда элемент отпустят в действующий зоне падения.
ondragover Скрипт запустится, если элемент тащат за допустимую зону падения.
ondragstart Скрипт запустится в начале операции перетаскивания элемента.
ondrop Скрипт запустится после перетаскивания элемента при падении.
onmousedown Скрипт запустится при нажатии кнопки мыши.
onmousemove Скрипт запустится, когда указатель мыши начнет перемещаться.
onmouseout Скрипт запустится, когда указатель мыши будет перемещаться из элемента.
onmouseover Скрипт запустится, когда указатель мыши будет перемещаться над элементом.
onmouseup Скрипт запустится при отпускании кнопки мыши.
onmousewheel Скрипт запустится при нажатии на колесо мыши.
onscroll Скрипт запустится во время прокручивания полосы прокрутки элемента.

События медиа-файлов

События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object> и <video>):

Атрибут Описание
onabort Скрипт запустится при прерывании.
oncanplay Скрипт запустится, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован).
oncanplaythrough Скрипт запустится, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации.
ondurationchange Скрипт запустится при изменении длины продолжительности медиа файла.
onemptied Скрипт запустится, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом).
onended Скрипт запустится, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр).
onerror Скрипт запустится, если возникнет ошибка при загрузке файла.
onloadeddata Скрипт запустится при загрузке данных медиа файла.
onloadedmetadata Скрипт запустится, когда загружены мета-данные (например размер и продолжительность).
onloadstart Скрипт запустится при загрузке файла прежде, чем начнет загружаться на самом деле.
onpause Скрипт запустится, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно.
onplay Скрипт запустится, когда файл готов начать воспроизводиться.
onplaying Скрипт запустится при воспроизведении файла.
onprogress Скрипт запускается, когда браузер находится в процессе получения данных медиа файла.
onratechange Скрипт запускается, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки).
onreadystatechange Скрипт запускается, каждый раз, при изменении состояния готовности (состояние готовности отслеживает состояние данных файла).
onseeked Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение "false", т.е.текущая позиция воспроизведения найдена.
onseeking Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение "true", т.е. текущая позиция воспроизведения перемещается.
onstalled Скрипт запускается, когда браузер не может получить данные медиа файла по любой причине.
onsuspend Скрипт запускается, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине.
ontimeupdate Скрипт запускается, когда позиция воспроизведения изменилась (например, когда пользователь выбрал точку воспроизведения на много дальше от текущей).
onvolumechange Скрипт запускается каждый раз при изменении значения громкости звука (включая полное отключение звука).
onwaiting Скрипт запускается, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных).

Тег // Вебшкола онлайн



Пример

<html>
<body>

<form action="">
Имя:
<input type="text" name="firstname">
<br>
Фамилия:
<input type="text" name="lastname">
</form>

</body>
</html>

Описание и использование

Тег <input> используется для ввода информации пользователем.

Поле ввода может варьироваться в зависимости от атрибута type. Оно может быть текстовым полем, полем для ввода пароля, кнопкой, выпадающим меню выбора и т.д.

Браузерная поддержка


Тег <input> поддерживается всеми основными браузерами.


Отличия между HTML и XHTML

В HTML тег <input> не имеет закрывающего тега.

В XHTML тег <input> обязательно должен быть закрыт, что достигается так: <input/>.


Совет

Используйте тег <label> для задания метки полю ввода.


Альтернативные атрибуты

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

Атрибут Значение Описание DTD
accept MIME-тип Указывает тип файла, который может быть загружен пользователем на сервер (только для type="file") STF
align left
right
top
middle
bottom

Устарело. Используйте CSS.

Определяет выравнивание кнопки-изображения (только для type="image")

TF
alt текст Указывает альтернативный текст для кнопки-изображения (только для type="image") STF
checked checked Определяет выбор по умолчанию для кнопки (только для type="checkbox" или type="radio") STF
disabled disabled Указывает на то, что поле ввода должно быть неактивно при загрузке страницы STF
maxlength число Указывает максимальное количество символов поля ввода (только для type="text" или type="password") STF
name имя Указывает название элемента STF
readonly readonly Указывает на то, что поле не может изменяться пользователем (только для type="text" или type="password") STF
size число Определяет ширину текстового поля TF
src URL Определяет адрес изображения, используемого в качестве кнопки подтверждения TF
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
Указывает тип поля ввода TF
value текст Указывает значение элемента формы TF

Стандартные атрибуты

Тег <input> поддерживает следующие стандартные атрибуты:

Атрибут Значение Описание DTD
accesskey символ (клавиша) Определяет клавишу (сочетание клавиш) для быстрого доступа к элементу STF
class название класса Указывает название класса для элемента STF
dir rtl
ltr
Указывает направление вывода текста для элемента STF
id id Указывает id для элемента STF
lang код_языка Указывает код языка содержимого элемента STF
style описание_элемента Указывает строчный стиль элемента STF
tabindex порядковый номер Указывает порядковый номер элемента при переключении с помощью клавиши Tab STF
title текст Указывает дополнительную информацию об элементе STF
xml:lang код_языка Указывает код языка содержимого элемента в XHTML документах STF

Дополнительная информация о стандартных атрибутах.


События

Тег <input> поддерживает следующие атрибуты событий:

Атрибут Значение Описание DTD
onblur скрипт Скрипт, который должен быть выполнен, когда элемент теряет фокус (т.е. курсор мыши уходит с элемента) STF
onchange скрипт Скрипт, который должен быть выполнен при изменении элемента STF
onclick скрипт Скрипт, который должен быть выполнен при одинарном щелчке мышью STF
ondblclick скрипт Скрипт, который должен быть выполнен при двойном щелчке мышью STF
onfocus скрипт Скрипт, который должен быть выполнен, когда элемент попадает в фокус (т.е. курсор мыши попадает на элемент) STF
onmousedown скрипт Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши STF
onmousemove скрипт Скрипт, который должен быть выполнен при движении курсора мыши STF
onmouseout скрипт Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента STF
onmouseover скрипт Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом STF
onmouseup скрипт Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши STF
onkeydown скрипт Скрипт, который должен быть выполнен при нажатии клавиши пользователем STF
onkeypress скрипт Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем STF
onkeyup скрипт Скрипт, который должен быть выполнен при отпускании клавиши пользователем STF
onselect скрипт Скрипт, который должен быть выполнен если элемент выбран STF

Дополнительная информация о cобытиях HTML.


Примеры

Создание поля для пароля
Пример иллюстрирует вставку ссылки.

Создание кнопки
Пример иллюстрирует использование изображения в качестве ссылки.

Форма с флажками (checkbox)
Открывание ссылки в новом окне браузера.

Форма с переключателями (radiobutton)
Вставка ссылки на определенное место (закладку) в открытом документе.

Событие onchange | htmlbook.ru


Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Описание

Событие возникает при изменении значения элемента формы, вроде текстового поля или списка. Например, событие onchange добавленное к тегу <textarea> срабатывает каждый раз, когда введен новый текст и поле потеряло фокус.

Синтаксис

onchange="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

<input>, <select>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Событие onchange</title>
 </head> 
 <body>
  <form action="">
   <fieldset>
    <legend>Быстрый переход по сайту</legend>
    <select onchange="document.location=this.options[this.selectedIndex].value">
      <option value="#">Выберите раздел сайта</option>
      <option value="depart.html">Отделения</option>
      <option value="techinfo.html">Техническая информация</option>
      <option value="study.html">Обучение</option>
    </select>
   </fieldset>
  </form>
 </body>
</html>

В данном примере при выборе пункта списка происходит переход на страницу, заданную значением атрибута value тега <option>.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Отправить ответ

avatar
  Подписаться  
Уведомление о