onfocusin 事件 - JavaScript 参考手册 - 简单教程，简单编程

HTML DOM 的 onfocusin 事件在一个元素即将获得焦点时触发

语法

HTML

<element onfocusin=" myScript ">

运行范例

JavaScript ( Chrome, Safari 和 Opera 15+ 可能无法正常工作 )

object.onfocusin=function(){ /*myScript*/ };

运行范例

JavaScript 使用 addEventListener() 方法

object.addEventListener("focusin", /*myScript*/ );

运行范例

Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法

浏览器支持


Yes	Yes	不支持	Yes	Yes

在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusin 事件可能无法正常工作，推荐 addEventListener()

说明

onfocusin 事件类似于 onfocus 事件

主要的区别是 onfocus 事件不支持冒泡

因此，如果想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件

虽然 Firefox 浏览器不支持 onfocusin 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture ）的捕获监听事件来查看元素或其子元素是否获取焦点

x.addEventListener("focus", myFocusFunction,  true);

onfocusin 事件的相反事件是 onfocusout 事件

其它

是否支持冒泡	Yes
是否可以取消	No
事件类型	FocusEvent
支持的 HTML 标签	所有 HTML 元素，除了 : <base>, <bdo>, <br/>, <head>, <html> , <br/> , <iframe> , <meta>, <param>, <script>, <style>, <title>

范例

在输入字段（input）即将获取焦点时执行 JavaScript

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

运行范例 »

范例

一起使用 "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>

运行范例 »