События и методы "focus/blur"

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

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

По умолчанию, не все элементы поддерживают эти события. Перечень элементов немного разнится от браузера к браузеру, например, список для IE описан в MSDN. Но есть элементы, которые поддерживают фокусировку всегда. В первую очередь это те, c которыми посетитель может взаимодействовать: INPUT, SELECT, A и т.п.

С другой стороны, элементы для форматирования, такие как DIV, SPAN, TABLE и другие — по умолчанию не поддерживают это событие, т.е. на них нельзя «фокусироваться». Впрочем, существует способ включить фокусировку и для них.

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

Поле из примера ниже при фокусировке(кликните на него) становится подсвеченным, а при снятии фокуса(клик в другом месте) теряет подсветку:

<input type="text">

<style> 
.highlight { background: #FA6; } 
</style>

<script>
var input = document.getElementsByTagName('input')[0];

*!*input.onfocus*/!* = function() {
  this.className = 'highlight';
}

*!*input.onblur*/!* = function() {
  this.className = '';
}
</script>

Этот пример — учебный. В современных браузерах для этого можно обойтись и без JavaScript.

HTML5 и CSS3 вместо focus/blur

Некоторые задачи могут быть решены средствами современного HTML/CSS. На текущий момент единственный браузер, который не очень поддерживает соответствующие свойства — это IE<10.

Поэтому, прежде, чем переходить к JavaScript, мы рассмотрим три примера.

Подсветка при фокусировке

Стилизация полей ввода при фокусировке во всех браузерах, кроме IE<8, может быть решена средствами CSS (CSS2.1), а именно — селектором :focus:

<style> 
*!*input:focus*/!* { background: #FA6; } 
</style>
<input type="text"> 

<p>Селектор :focus выделит элемент при фокусировке на нем (кроме IE<8).</p>

Автофокус

При загрузке страницы, если на ней существует элемент с атрибутом autofocus — браузер автоматически фокусируется на этом элементе. Работает во всех браузерах, кроме IE<10.

<input type="text" name="search" *!*autofocus*/!*>

Кросс-браузерно можно сделать вызовом JavaScript:

<input type="text" name="search">
<script> 
  document.getElementsByName('search')[0].focus();
</script>

Плейсхолдер

Плейсхолдер — это значение-подсказка внутри INPUT, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст.

Во всех браузерах, кроме IE<10, это реализуется специальным атрибутом placeholder:

<input type="text" placeholder="E-mail"> Работает везде, кроме IE до 10

В некоторых браузерах этот текст можно стилизовать:

<style>
.my*!*::-webkit-input-placeholder*/!*, .my*!*::-moz-placeholder*/!* {
  color: red;
  font-style: italic;
}
</style>

<input class="my" type="text" placeholder="E-mail"> 
Стилизуется в Safari/Chrome/FF

input.onfocus = function() {
  if (this.className == 'placeholder') {
    prepareInput(this);
  }
}

function prepareInput(input) { // превратить элемент в простой пустой input
  input.className = '';
  input.value = '';
}

input.onblur = function() {
  if (this.value == '') { // если пустой
    resetInput(this); // заполнить плейсхолдером
  }
}

function resetInput(input) {
  input.className = 'placeholder';
  input.value = 'E-mail';
}

function prepareInput(input) {
  input.className = '';
*!*
  input.oldValue = input.value;
*/!*
  input.value = '';
}

function resetInput(input) {
  input.className = 'placeholder';
  input.value = input.oldValue;
}

Метод elem.focus()

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

Например, можно показать форму и тут же сфокусироваться на ее поле, чтобы посетитель мог вводить текст:

<form style="display:none" name="form">
  Искать <input style="text" name="search">
</form>

<input type="button" value="Показать форму поиска" onclick="showForm()">

<script>
function showForm() {
  var form = document.forms.form;
  form.style.display = 'block';
*!*
  form.elements.search.focus();
*/!*
}
</script>

Разрешаем фокус на любом элементе: tabindex

Несмотря на то, что не все элементы могут иметь фокус по умолчанию, существует атрибут tabindex, который позволяет устранить подобную несправедливость.

Когда вы присваиваете tabindex="<число>" элементу:

• Появляется возможность на нем сфокусироваться.
• Пользователь при нажатии клавиши «Tab» переходит от элемента с наименьшим положительным значением tabindex к следующему.

  Исключением является специальное значение tabindex="0", которое делает элемент всегда последним.

• Значение tabindex=-1 означает, на элементе можно фокусироваться, но только программно. Клавиша «Tab» будет его игнорировать. Сработает только метод focus().

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

Кликните на первый элемент списка и нажмите Tab. Осторожно, Tab может вывести вас за границы примера.
<ul>
<li tabindex="1" onfocus="showFocus(this)">Один</li>
<li tabindex="0" onfocus="showFocus(this)">Ноль</li>
<li tabindex="2" onfocus="showFocus(this)">Два</li>
<li tabindex="-1" onfocus="showFocus(this)">Минус один</li>
</ul>

<style> :focus { border: 1px dashed green; outline: 0; } </style>

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

Некоторые браузеры выделяют элемент с фокусом пунктирной рамочкой. В примере выше это выделение убрано при помощи CSS-свойства outline: 0 и заменено собственной рамкой.

Событие blur и метод elem.blur()

Событие blur — это противоположность focus. Событие срабатывает, когда элемент теряет фокус. Метод elem.blur() заставляет элемент потерять фокус, если таковой имеется.

Зачастую это событие используется для проверки («валидации») значения

В следующем примере, поле ввода проходит валидацию при потере фокуса. Наберите что-нибудь в поле «возраст» примера ниже и завершите ввод, нажав Tab или кликнув в другое место страницы.

Введенное значение будет автоматически проверено:

<label>Введите ваш возраст: <input type="text" name="age"></label>

<div id="error">здесь будет ошибка, если вы введёте не число</div>
<style> .error { background: red; } </style>

<script>
var input = document.getElementsByName('age')[0];
var errorHolder = document.getElementById('error');

*!*input.onblur*/!* = function() {
  if (isNaN(this.value)) { // введено не число
    // показать ошибку
    this.className = 'error';
    errorHolder.innerHTML = 'Вы ввели не число. Исправьте, пожалуйста'
  }
}

*!*input.onfocus*/!* = function() { 
  // сбросить состояние "ошибка", если оно есть
  if (this.className == 'error') {
    this.className = '';
    errorHolder.innerHTML = '';
  }
}
</script>

Здесь кроме blur использован также обработчик события focus, чтобы повторная фокусировка снимала состояние «ошибки».

Делегирование с focus/blur

События focus и blur не всплывают.

Таким образом, мы не можем использовать делегирование с ними. Например, мы не можем сделалать так, чтобы при фокусировке в форме она подсвечивалась:

<form *!*onfocus="this.className='focused'"*/!*>
  <input type="text" name="name" value="Ваше имя">
  <input type="text" name="surname" value="Ваша фамилия">
</form>

<style> .focused { border: 2px solid red; } </style>

В примере выше стоит обработчик onfocus на форме, но он не работает, т.к. при фокусировке на любом INPUT событие focus срабатывает только на этом элементе и не всплывает наверх.

Что делать? Неужели мы должны присваивать обработчик каждому полю или все-таки есть возможность использовать делегирование?

Всплывающие альтернативы: focusin/focusout

• В современных стандартах есть события focusin/focusout — тоже самое, что и focus/blur, только они всплывают.

  Поддерживается в IE6+, а также в Safari/Chrome и Opera. Во всех браузерах, кроме IE, должны быть при назначены не через on-свойство, а помощи elem.addEventListener.

  Единственный современный браузер, который их не поддерживает — это Firefox.

• Во всех браузерах, кроме IE<9, события focus/blur можно поймать на стадии захвата, то есть указав последний аргумент true для addEventListener вместо обычного false.

Как правило, используют две ветки кода: focus/blur ловят на фазе захвата везде, кроме старых IE, в которых используют focusin/focusout.

Подсветка формы в примере ниже работает во всех браузерах.

<form name="form">
  <input type="text" name="name" value="Ваше имя">
  <input type="text" name="surname" value="Ваша фамилия">
</form>
<style>
.focused { border: 2px solid red; }
</style>

<script>
function onFormFocus() { this.className = 'focused'; }
function onFormBlur() { this.className = ''; }

var form = document.forms.form;

if (form.addEventListener) { 
  form.addEventListener('focus', onFormFocus, true); 
  form.addEventListener('blur', onFormBlur, true); 
} else {  // IE<9
  form.onfocusin = onFormFocus;
  form.onfocusout = onFormBlur;
}
</script>

Итого

Есть 3 способа сфокусироваться на элементе:

1. Кликнуть мышью
2. Перейти на него клавишей Tab
3. Вызвать elem.focus()

• По умолчанию, на многие элементы не могут получить фокус. Например, если вы кликните по DIV, то фокусировка на нем не произойдет.

  Но это можно изменить, если поставить элементу атрибут tabIndex. Этот атрибут также дает возможность контролировать порядок перехода при нажатии «Tab».

• События focus и blur не всплывают.

  В случаях, когда всплытие необходимо, нужно использовать focusin/focusout в IE и focus/blur на стадии захвата для других браузеров.

document.getElementById('mousie').onfocus = function() {
  var coords = getCoords(this);

*!*
  document.body.appendChild(this);
*/!*
  
  this.style.position = 'absolute';
  this.style.left = coords.left + 'px';
  this.style.top = coords.top + 'px';
};

document.getElementById('mousie').onclick = function() {
  var coords = getCoords(this);
  this.style.position = 'absolute';
  this.style.left = coords.left + 'px';
  this.style.top = coords.top + 'px';

*!*
  if (this.parentNode != document.body) {
    document.body.appendChild(this);
    this.focus();
  }
*/!*
};

var capsLockEnabled = null;

document.onkeypress = function(e) {
  e = e || event; 

  var chr = getChar(e);
  if (!chr) return; // специальная клавиша

  if (chr.toLowerCase() == chr.toUpperCase()) {
    // символ, который не имеет регистра, такой как пробел,
    // мы не можем использовать для определения состояния CapsLock
    return;
  }

  capsLockEnabled = (chr.toLowerCase() == chr && e.shiftKey) || (chr.toUpperCase() == chr && !e.shiftKey);
}

if (nagivator.platform.substr(0,3) != 'Mac') { // событие для CapsLock глючит под Mac
  document.onkeydown = function(e) {
    e = e || event;
  
    if (e.keyCode == 20 && capsLockEnabled !== null) {
      capsLockEnabled = !capsLockEnabled;
    }
  }
}

<input type="text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>

<div style="display:none;color:red" id="caps">Внимание: нажат CapsLock!</div>

<script>
function checkCapsWarning() {
  document.getElementById('caps').style.display = capsLockEnabled ? 'block' : 'none';
}

function removeCapsWarning() {
  document.getElementById('caps').style.display = 'none';
}
</script>

#view, #area {
  height:150px;
  width:400px;
  font-family:arial;
}

#view {  
  /* padding + border = 3px */
  padding: 2px; 
  border:1px solid black; 
}

#area {
  border: 3px groove blue;  
  padding: 0px;

  display:none;
}

#area:focus { 
  outline: none; /* убирает рамку в Safari при фокусе */
}

document.onkeydown = function(e) {
  e = e || event;
  if (e.keyCode == 27) { // escape
    cancel();
    return false;
  }

  if ((e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)) && !area.offsetHeight) {
    edit();
    return false;
  }

  if ((e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) && area.offsetHeight) {
    save();
    return false;
  }
}

function edit() {
    view.style.display = 'none';
    area.value = view.innerHTML;
    area.style.display = 'block';
    area.focus();
}

function save() {
    area.style.display = 'none';
    view.innerHTML = area.value;
    view.style.display = 'block';
}

function cancel() {
    area.style.display = 'none';
    view.style.display = 'block';
}

placeholder.onclick = function() {
  input.focus();
}

/* это событие сработает 
   и вызове `input.focus()`
   и при прямом клике на input
*/
input.onfocus = function() {
  placeholder.parentNode && placeholder.parentNode.removeChild(placeholder);
}