最新的Web开发教程
 

onfocusout在事件

<事件对象

执行一个JavaScript当输入场即将失去焦点:

<input type="text" onfocusout="myFunction()">
试一试»

更多"Try it Yourself"下面的例子。


定义和用法

当一个元素即将失去焦点时发生onfocusout在事件。

提示:onfocusout在事件是类似的onblur事件。 的主要区别在于,onblur事件不起泡。 因此,如果你想找出一个元素或者其子是否失去焦点,您应使用onfocusout在事件。

提示:尽管Firefox不支持onfocusout在事件中,你可以找到一个元素的孩子是否失去焦点与否,使用捕获侦听器的onblur事件(使用的可选参数将useCapture addEventListener()方法)。

Tip:该onfocusout在事件是相反onfocusin事件。


浏览器支持

事件
onfocusout 不支持

注意:如预期在Chrome,Safari和Opera 15+使用JavaScript的HTML DOM语法onfocusout在事件可能无法正常工作。 然而,它应该工作作为HTML属性,并通过使用addEventListener()方法。


句法

在HTML:

在JavaScript (may not work as expected in Chrome, Safari and Opera 15+)

object .onfocusout=function(){ 试一试»

在JavaScript中,使用addEventListener()方法:

object .addEventListener("focusout", myScript );
试一试»

注意: addEventListener()在Internet Explorer 8和更早版本不支持的方法。


技术细节

泡沫:
取消: 没有
事件类型: FocusEvent
支持的HTML标签: 所有的HTML元素,除了:<基数>,<BDO>,点击<HEAD>,<HTML>,<IFRAME>,<META>,<param>的<SCRIPT>,<STYLE>和<title>
DOM版本: 2级事件

例子

更多示例

使用"onfocusin"连同"onfocusout"事件:

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

事件代表团:设置的参数将useCapture addEventListener()为true (for focus and blur)

<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>
试一试»

<事件对象