最新的Web开发教程
 

onblur事件

<事件对象

例

执行一个JavaScript当用户离开输入框：

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

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

定义和用法

当一个对象失去焦点发生onblur事件。

onblur事件最常与表单验证代码中使用（例如，当用户离开一个形式字段）。

Tip: onblur事件是相反的onfocus事件。

提示：onblur事件类似于onfocusout在事件。 的主要区别在于，onblur事件不起泡。 因此，如果你想找出一个元素或者其子是否失去焦点，您可以使用onfocusout在事件。 但是，您可以使用的可选参数将useCapture实现这一目标addEventListener()用于onblur事件的方法。

浏览器支持

事件
onblur 是 是 是 是 是

句法

在HTML：

< 试一试»

在JavaScript：

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

在JavaScript中，使用addEventListener()方法：

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

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

技术细节

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

更多示例

例

使用"onblur"连同"onfocus"事件：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
试一试»

例

事件代表团：设置的参数将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>
试一试»
<事件对象