onfocusinСобытие
Объект EventПримеры
Выполнить JavaScript, когда поле ввода вот-вот получит фокус:
Попробуйте сами »
Дополнительные примеры приведены в конце этой главы.
Определение и использование
Событие onfocusin срабатывает, когда элемент вот-вот получит фокус.
Совет:Событие onfocusin похоже на событиеonfocus. Основное различие состоит в том, что событие onfocus не поддерживает всплытие. Поэтому, если вы хотите узнать, получил ли фокус элемент или его дочерние элементы, необходимо использовать событие onfocusin.
Совет:Хотя Firefox не поддерживает событие onfocusin, вы можете использовать событиеonfocus(необязательный параметр метода addEventListener()useCapture) событие слушателя с захватом, чтобы увидеть, получил ли фокус элемент или его дочерние элементы.
Совет:Противоположное событие для onfocusin — это событиеonfocusout.
Поддержка браузеров
| Event | |||||
|---|---|---|---|---|---|
| onfocusin | Да | Да | Не поддерживается | Да | Да |
Примечание:В браузерах Chrome, Safari и Opera 15+ событие onfocusin, использующее синтаксис HTML DOM, может работать неправильно. Однако как HTML-элемент оно правильно работает при использовании метода addEventListener().
Синтаксис
В HTML:
В JavaScript (может работать неправильно в Chrome, Safari и Opera 15+):
В JavaScript с использованием метода addEventListener():
Примечание:Internet Explorer 8 и более ранние версии IE не поддерживают методaddEventListener().
Технические детали
| Всплывает: | Да |
|---|---|
| Отменяемое: | Нет |
| Тип события: | FocusEvent |
| Поддерживаемые HTML-теги: | Все HTML-элементы, кроме: <>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title> |
Другие примеры
Пример
Используйте события "onfocusin" и "onfocusout" вместе:
Попробуйте сами »
Пример
Делегирование событий: установите параметр addEventListener()useCaptureв true (для получения и потери фокуса):
<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):
<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>
Попробуйте сами »
Другие расширения