События: focus и blur

События: focus и blur

Здравствуйте!  Продолжаем разбираться  с обработкой   полей и элементов  формы на JavaScript  и сегодня рассмотрим такие события как  focus и blur.   Давайте сразу разберемся, что такое «фокус  элемента» —  это когда  пользователь  клацает на элементе формы.

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

События focus и blur

События focus/blur

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

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

В примере:

  • Обработчик onblur проверяет, что в поле введено число, если нет –  будет показывать ошибку.
  • Обработчик onfocus, если текущее состояние поля ввода – «ошибка» – скрывает её (потом при onblur будет повторная проверка).

В примере, если  вы наберете  что-нибудь в поле «возраст» и завершите ввод  далее  нажмете Tab или  просто кликните в другое место страницы, то введённое значение будет автоматически проверено:

<style> 
.error { border-color: red; } 
</style> 
Введите ваш возраст: <input type="text" id="input"> 
<div id="error"></div> 
<script> 
input.onblur = function() { 
 if (isNaN(this.value)) { // введено не число // показать ошибку 
this.className = "error"; 
error.innerHTML = 'Вы ввели не число. Исправьте, пожалуйста.' 
  } 
}; 
input.onfocus = function() { 
if (this.className == 'error') { // сбросить состояние "ошибка", если оно есть 
this.className = ""; 
error.innerHTML = ""; 
  } 
}; 
</script>

Просмотреть  пример

 

Методы focus/blur

Также в Javascript  имеются и методы с теми же названиями, которые  переводят/уводят фокус с элемента.

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

<style>
  .error {
    background: red;
  }
</style>
<div>Возраст:
  <input type="text" id="vozr">
</div>
<div>Имя:
  <input type="text">
</div>
<script>
  vozr.onblur = function() {
    if (isNaN(this.value)) { // введено не число
      // показать ошибку
      this.classList.add("error");
      //... и вернуть фокус обратно
      vozr.focus();
    } else {
      this.classList.remove("error");
    }
  };
</script>

Просмотреть пример
Если ввести что-то нецифровое в поле «возраст», и потом попытаться табом или мышкой перейти на другой <input>, то обработчик  события onblur вернёт фокус обратно.

Читайте также  Отправка данных формы: событие и метод submit

Обращаю внимание  на  такой случай – если из события  onblur сделать event.preventDefault(), то такого же эффекта не будет, потому что onblur срабатывает уже после того, как элемент потерял фокус.

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

Прежде чем  мы перейдем к более сложным примерам, использующим JavaScript,  давайте рассмотрим 3 примера, когда его Javascript использовать не надо, а достаточно современного HTML/CSS.

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

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

<style> 
input:focus { background: #FAА; outline: none; /* убрать рамку */ 
} </style> 
<input type="text"> 
<p>Селектор :focus выделит элемент при фокусировке на нем и уберёт рамку, которой браузер выделяет этот элемент по умолчанию.</p>

Автофокус

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

<input type="text" name="search" autofocus>

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

Плейсхолдер

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

<input type="text" placeholder="E-mail">

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

<style> 
.myinput::-webkit-input-placeholder { color: red; font-style: italic; } 
.myinput::-moz-input-placeholder { color: red; font-style: italic; } 
.myinput::-ms-input-placeholder { color: red; font-style: italic; } 
</style> 
<input class="myinput" type="text" placeholder="E-mail"> Стилизованный плейсхолдер

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

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

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

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

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

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

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

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

  • tabindex=»0″ делает элемент всегда последним.
  • tabindex=»-1″ означает, что клавиша Tab будет элемент игнорировать.
Читайте также  Изменение элементов формы: change, input, cut, copy, paste

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

<ul>
  <li tabindex="1">Один</li>
  <li tabindex="0">Ноль</li>
  <li tabindex="2">Два</li>
  <li tabindex="-1">Минус один</li>
</ul>
<style>
  li { cursor: pointer; }
  :focus { outline: 1px dashed green; }
</style>

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

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

События focus и blur к  сожалению  не всплывают ( про всплытие   событий я  писал здесь).

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

 
<!-- при фокусировке на форме ставим ей класс --> 
<form onfocus="this.className='focused'"> 
<input type="text" name="name" value="Ваше имя"> 
<input type="text" name="surname" value="Ваша фамилия"> 
</form> 
<style> 
.focused { outline: 1px solid red; } 
</style>

Пример выше не работает, т.к. при фокусировке на любом <input> событие focus срабатывает только на этом элементе и не всплывает наверх. Так что обработчик onfocus на форме никогда не сработает.

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

Это забавно, но хотя focus/blur не всплывают, они могут быть пойманы на фазе перехвата.

Вот так сработает:

<form id="form">
  <input type="text" name="name" value="Ваше имя">
  <input type="text" name="surname" value="Ваша фамилия">
</form>

<style>
  .focused {
    outline: 1px solid red;
  }
</style>

<script>
  // ставим обработчики на фазе перехвата, последний аргумент true
  form.addEventListener("focus", function() {
    this.classList.add('focused');
  }, true);

  form.addEventListener("blur", function() {
    this.classList.remove('focused');
  }, true);
</script>

События focusin/focusout

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

У них  есть 2  особенности:

  • Не поддерживаются Firefox
  • Должны быть назначены не через on-свойство, а при помощи elem.addEventListener.

Из-за отсутствия подержки Firefox эти события используют редко. Получается, что во всех браузерах можно использовать focus на стадии перехвата, ну а focusin/focusout – в IE8-, где стадии перехвата нет.

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

<form name="form">
  <input type="text" name="name" value="Ваше имя">
  <input type="text" name="surname" value="Ваша фамилия">
</form>
<style>
  .focused {
    outline: 1px solid red;
  }
</style>
<script>
  function onFormFocus() {
    this.className = 'focused';
  }

  function onFormBlur() {
    this.className = '';
  }
  var form = document.forms.form;

  if (form.addEventListener) {
    // focus/blur на стадии перехвата срабатывают во всех браузерах
    // поэтому используем их
    form.addEventListener('focus', onFormFocus, true);
    form.addEventListener('blur', onFormBlur, true);
  } else {
    // ветка для IE8-, где нет стадии перехвата, но есть focusin/focusout
    form.onfocusin = onFormFocus;
    form.onfocusout = onFormBlur;
  }
</script>

Итого

События focus/blur происходят  соответственно при получении и снятии фокуса с элемента формы.

Читайте также  Свойства элементов формы

У них есть особенности:

  • Они не всплывают. Но на фазе перехвата их можно перехватить.
  • По умолчанию многие элементы не могут получить фокус. Например, если вы кликните по DIV, то фокусировка на нем не произойдет.Но это можно изменить, если поставить элементу атрибут tabIndex. Этот атрибут также дает возможность контролировать порядок перехода при нажатии Tab.

Задания

Улучшенный плейсхолдер

Реализуйте более удобный плейсхолдер-подсказку на JavaScript через атрибут data-placeholder.

Правила работы плейсхолдера:

  • Элемент изначально содержит плейсхолдер. Специальный класс placeholder придает ему синий цвет.
  • При фокусировке плейсхолдер показывается уже над полем, становясь «подсказкой».
  • При снятии фокуса, подсказка убирается, если поле пустое – плейсхолдер возвращается в него.

Горячие клавиши

Создайте <div>, который при нажатии Ctrl+E превращается в <textarea>.
Изменения, внесенные в поле, можно сохранить обратно в <div> сочетанием клавиш Ctrl+S, при этом <div> получит в виде HTML содержимое <textarea>.
Если же нажать Esc, то <textarea> снова превращается в <div>, изменения не сохраняются.

Редактирование TD по клику

Сделать ячейки таблицы td редактируемыми по клику.

  • При клике – ячейка <td> превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.
  • В один момент может редактироваться одна ячейка.
  • При редактировании под ячейкой появляются кнопки для приема и отмены редактирования, только клик на них заканчивает редактирование.

Красивый плейсхолдер для INPUT

Создайте для поля  <input type=»password»> красивый, стилизованный плейсхолдер

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: