onblur 事件

实例

当用户离开输入字段时执行 JavaScript：

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

亲自试一试

页面下方有更多 TIY 实例。

定义和用法

onblur 事件发生在对象失去焦点时。

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

提示： onblur 事件与 onfocus 事件相反。

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

浏览器支持

语法

在 HTML 中：

<element onblur="myScript">

亲自试一试

在 JavaScript 中：

object.onblur = function(){myScript};

亲自试一试

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

object.addEventListener("blur", myScript);

亲自试一试

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

更多实例

实例

将 "onblur" 与 "onfocus" 事件一起使用：

<input type="text" onfocus="focusFunction()" onblur="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>

亲自试一试