События формы и элементов управления

focus: Событие происходит, когда элемент получает фокус. Данное событие не всплывает.
blur: Событие происходит, когда объект теряет фокус. Данное событие не всплывает.
focusin: Событие происходит, когда элемент получает фокус. Событие focusin подобно событию focus, но отличается от него тем, что оно всплывает.
focusout: Событие происходит, когда элемент собирается потерять фокус. Событие focusout подобно событию blur, но отличается от него тем, что оно всплывает.
change: Событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус.
input: Событие происходит после того как изменяется значение элемента input или элемента textarea.
invalid: Событие происходит, когда элемент input, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.
reset: Событие происходит перед очисткой формы, которая осуществляется элементом input с type="reset".
search: Событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку "x" (отмена) в элементе input с type="search".
select: Событие происходит после того как Вы выбрали некоторый текст в элементе.
submit: Событие происходит перед отправкой формы на сервер.

События focus/blur

Событие focus вызывается тогда, когда пользователь фокусируется на элементе, а blur – когда фокус исчезает, например посетитель кликает на другом месте экрана.

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

По умолчанию не все элементы поддерживают фокусировку.

Перечень элементов немного рознится от браузера к браузеру, например, список для IE описан в MSDN, одно лишь верно всегда – заведомо поддерживают focus/blur те элементы, c которыми посетитель может взаимодействовать: <button>, <input>, <select>, <a> и т.д.

С другой стороны, на элементах для форматирования, таких как <div>, <span>, <table> – по умолчанию сфокусироваться нельзя. Впрочем, существует способ включить фокусировку и для них.

В HTML есть атрибут tabindex.

Его основной смысл – это указать номер элемента при переборе клавишей Tab.

То есть, если есть два элемента, первый имеет tabindex="1", а второй tabindex="2", то нажатие Tab при фокусе на первом элементе – переведёт его на второй.

Исключением являются специальные значения:

tabindex="0" делает элемент всегда последним.
tabindex="-1" означает, что клавиша Tab будет элемент игнорировать.

Любой элемент поддерживает фокусировку, если у него есть tabindex.

В примере ниже есть список элементов. Кликните на любой из них и нажмите «tab».

<style>
  li { cursor: pointer; }
  :focus { outline: 1px dashed green; }
</style>
<p>Кликните на первый элемент списка и нажмите Tab. 
   Внимание! Дальнейшие нажатия Tab могут вывести за границы iframe'а с примером.</p>
<ul>
  <li tabindex="1">Один</li>
  <li tabindex="0">Ноль</li>
  <li tabindex="2">Два</li>
  <li tabindex="-1">Минус один</li>
</ul>

Порядок перемещения по клавише «Tab» в примере выше должен быть таким: 1 - 2 - 0 (ноль всегда последний).

Обычно <li> не поддерживает фокусировку, но здесь есть tabindex.

Примеры

<p>Когда вы в поле ввода, запускается функция, которая устанавливает цвет фона в желтый цвет. 
Когда вы покидаете поле ввода, запускается функция, которая устанавливает цвет фона в красный цвет.</p>

Введите ваше имя: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">

<script>
function focusFunction() 
  { document.getElementById("myInput").style.background = "yellow"; }

function blurFunction()
  { document.getElementById("myInput").style.background = "red"; }
</script>

Методы focus()/blur()

Методы focus()/blur() переводят/уводят фокус с элемента.

Синтаксис

element.focus()  // Установить фокус на элементе

element.blur()   // Убрать фокус с элемента

Пример

<style>
:focus {border: 1px solid red;}
</style>
<p><a id="a1" href="help.html">Справка</a></p>
<p> Элемент input:      <input id="a2" type="text"></p>
Элемент textarea: <textarea id="a3"></textarea>
<p>Установить фокус: 
<button onclick="F(1)"> на ссылку </button>     
<button onclick="F(2)"> в input </button>      
<button onclick="F(3)"> в textarea </button></p>
<button onclick="F(0)"> Убрать фокус </button>
<script>
function F(n) {
 if (n==0) 
  { document.getElementById('a1').blur();
    document.getElementById('a2').blur();
    document.getElementById('a3').blur();  }
 else document.getElementById('a'+n).focus(); 
}
</script>

События focusin/focusout

События focusin/focusout – то же самое, что и focus/blur, только они всплывают.

Поэтому их можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?

Совместимость с браузерами


Да	Да	52,0	Да	Да

Пример

<p>Когда вы в поле ввода, запускается функция, которая устанавливает цвет фона в желтый цвет. 
Когда вы покидаете поле ввода, запускается функция, которая устанавливает цвет фона в красный цвет.</p>

Введите ваше имя: <input type="text" id="myInput" onfocusin="focusFunction()" onfocusout="blurFunction()">

<script>
function focusFunction() 
  { document.getElementById("myInput").style.background = "yellow"; }

function blurFunction()
  { document.getElementById("myInput").style.background = "red"; }
</script>

change

Событие change происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события change в JavaScript есть также похожее событие input, которое отличается от события change тем, что происходит сразу же после изменения значения элемента. Событие сhange в отличие от события input также работает с элементами keygen и select. Для радиокнопок (radiobuttons) и флажков (checkboxes) событие change происходит при изменении состояния этих элементов.

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

Пример

<p>Выберите новый автомобиль из списка.</p>
<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>

<p>Когда вы выбираете новый автомобиль, срабатывает функция, 
   которая выводит название выбранного автомобиля.</p>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "Вы выбрали: " + x;
}
</script>

input

Событие input происходит после того как изменяется значение элемента input или элемента textarea.

Это событие похоже на событие change. Разница заключается в том, что событие input происходит сразу же после того, как значение элемента изменилось, в то время как change происходит, когда элемент теряет фокус, после того, как содержание было изменено.

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

Совместимость с браузерами


Да	9,0	4,0	Да	5,0

В современных браузерах input – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.

Если бы ещё не проблемы со старыми IE…

В IE10- есть событие propertychange, которое происходит при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования – исправление недочётов обработки событий в старых IE.

Что же касается IE9 – там поддерживаются и input и onpropertychange, но они оба не работают при удалении символов.

Примеры

<p>Напишите что-нибудь в текстовом поле, чтобы вызвать функцию.</p>

<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "Вы пишите: " + x;
}
</script>

Кроссбраузерное решение

<p>Напишите что-нибудь в текстовом поле.</p>

<input type="text" id="myInput">
<p id="demo"></p>

<script>
var v = document.getElementById("myInput");
function myFunction() 
  { document.getElementById("demo").innerHTML = "Вы пишите: " + v.value; }

  v.onkeyup = v.oninput = myFunction;
  v.onpropertychange = function() 
   { if (event.propertyName == "value") myFunction();  }
  v.oncut = function() 
    { setTimeout(myFunction, 0); } // на момент oncut значение еще старое
</script>

invalid

Событие invalid происходит, когда элемент input, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.

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

<input>

Совместимость с браузерами


Да	10,0	Да	Нет	Да

Пример

<form action = "handler.php" method = "get">
Нажмите отправить: <input type = "text" oninvalid = "testFunction()" name = "info" required>
<input type = "submit" value = "Отправить">
</form>
<script>
function testFunction() 
  { Alert("Вы не заполнили обязательное поле!"); }
</script>

reset

Событие reset происходит перед очисткой формы, которая осуществляется элементом input с type="reset".

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

Пример

<p>Напишите что-нибудь в текстовом поле и нажмите кнопку «Сброс».</p>
<form action = "handler.php" method = "get" id="form">
  <input type="text" name="something">
  <input type="reset">
</form>

<script>
document.getElementById("form").onreset=myFunction;
function myFunction(event) 
  { if (!confirm("Вы уверены?")) event.preventDefault(); }
</script>

search

Событие search возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку "x" (отмена) в элементе input с type="search".

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

Совместимость с браузерами


Да	Нет	Нет	Да	15,0

Пример

<p>Напишите что-нибудь в поле поиска и нажмите «ENTER».</p>
<input type="search" id="myInput" onsearch="myFunction()">
<p><b>Примечание</b>. Событие onsearch не поддерживается в Internet Explorer, Firefox и  Opera 12,0-.</p>
<p id="demo"></p>

<script>
function myFunction() {
   var x = document.getElementById("myInput");
   document.getElementById("demo").innerHTML = "Вы ищете: " + x.value;
}
</script>

select

Событие select происходит после того как Вы выбрали некоторый текст в элементе. Событие select в основном используется для элемента input с type="text" или textarea.

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

Пример

<input type="text"  value="Выделите здесь текст" onselect="alert('Вы выделили текст')" />

submit

Событие submit происходит перед отправкой формы на сервер.

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

Пример

<form id="myForm" action="handler.php">
  Введите имя: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").onsubmit = myFunction;
function myFunction(event) 
  { if (!confirm("Вы уверены?")) event.preventDefault(); }
</script>