onfocusin 事件

实例

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

尝试一下 »

本章节底部还有更多实例。

定义和用法
 onfocusin 事件在一个元素即将获得焦点时触发。
提示：  onfocusin 事件类似于onfocus 事件。 主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。
提示： 虽然 Firefox 浏览器不支持 onfocusin 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。
提示：  onfocusin 事件的相反事件是onfocusout 事件。

浏览器支持


事件                                           

onfocusin    Yes    Yes    不支持    Yes    Yes  

注意：  在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusin 事件可能无法正常工作。但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

语法
 HTML 中:
<element onfocusin="myScript">

实例

object.onfocusin=function(){myScript};

实例

object.addEventListener("focusin", myScript);

实例

一起使用 "onfocusin" 和 "onfocusout" 事件:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

实例

事件委托：设置 addEventListener() 的 useCapture 参数为 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>