Событие onfocus

События DOM FocusEvent

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

Событие onfocus происходит при получении элементом фокуса.

Событие onfocus наиболее часто используется с <input>, <select> и <a>.

Совет: Событие onfocus подобно Событие onblurнапротив.

Совет: Событие onfocus подобно Событие onfocusin.Основное различие заключается в том, что событие onfocus не может перебрасываться. Поэтому, если вы хотите определить, получил ли элемент или его подэлемент фокус, используйте событие onfocusin. Однако, вы можете использовать событие onfocus Метод addEventListener()от useCapture Параметры для этого.

Пример

Пример 1

Выполните JavaScript при фокусировке поля ввода:

<input type="text" onfocus="myFunction()">

Попробуйте сами

Ниже страницы есть больше примеров TIY.

Грамматика

В HTML:

<элемент onfocus="myScript">

Попробуйте сами

В JavaScript:

объект.onfocus = function(){myScript};

Попробуйте сами

В JavaScript, использование метода addEventListener():

объект.addEventListener("focus", myScript);

Попробуйте сами

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener()。

Технические детали

Бублящие: Не поддерживается
Отменяемые: Не поддерживается
Тип события: FocusEvent
Поддерживаемые HTML-теги: Все HTML-элементы, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title>
Версия DOM: Уровень 2 событий

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

События Chrome IE Firefox Safari Opera
onfocus Поддержка Поддержка Поддержка Поддержка Поддержка

Более примеров

Пример 2

Использование событий onfocus и onblur:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Попробуйте сами

Пример 3

Очистка поля ввода, получившего фокус:

<!-- При получении фокуса полем ввода текущее значение заменяется на пустую строку -->
<input type="text" onfocus="this.value=''" value="Blabla">

Попробуйте сами

Пример 4

Удаление событий: установите параметр useCapture в addEventListener() в значение true:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Попробуйте сами

Пример 5

Удаление событий: использование события focusin (Firefox не поддерживает):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Попробуйте сами

События DOM FocusEvent