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

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-теги

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

Да	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>