Событие onfocus
Пример
Выполнение JavaScript, когда поле ввода получает фокус:
<input type="text"
onfocus="myFunction()">
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Событие onfocus происходит, когда элемент получает фокус.
Событие onfocus чаще всего используется с <input>, <select> и <a>.
Совет: событие onfocus противоположно событию onblur .
Совет: событие onfocus аналогично событию onfocusin . Основное отличие состоит в том, что событие onfocus не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его дочерний элемент, вы можете использовать событие onfocusin. Однако этого можно добиться, используя необязательный параметр useCapture метода addEventListener() для события onfocus.
Поддержка браузера
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
Синтаксис
В HTML:
<element onfocus="myScript">
В JavaScript:
object.onfocus = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("focus", myScript);
Примечание. Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях.
Технические детали
Пузыри: | Нет |
---|---|
Отменяемо: | Нет |
Тип события: | ФокусСобытие |
Поддерживаемые HTML-теги: | ВСЕ элементы HTML, КРОМЕ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title> |
Версия ДОМ: | События уровня 2 |
Дополнительные примеры
Пример
Использование onfocus вместе с событием onblur:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Пример
Очистить поле ввода в фокусе:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Пример
Делегирование события: установка для параметра 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>
Пример
Делегирование события: использование события 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>