目录

onblur 事件

❮上一节活动参考下一节❯

示例

当用户离开输入字段时调用函数：

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

亲自试一试 »

描述

这个onblur事件发生时HTML 元素失去焦点。

这个onblur事件通常用于输入字段。

这个onblur事件通常与表单验证一起使用（当用户离开表单字段时）。

基于焦点的事件

Event	Occurs When
focus	An element gets focus
blur	An element loses focus
focusin	An element gets focus
focusout	An element loses focus

也可以看看：

焦点事件对象

语法

在 HTML 中：

< element onblur=" myScript">

亲自试一试 »

在 JavaScript 中：

object.onblur = function(){ myScript};

亲自试一试 »

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

object.addEventListener("blur", myScript);

亲自试一试 »

技术细节

气泡：	不
可取消：	不
事件类型：	焦点事件
HTML 标签：	所有 HTML 元素，除了：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title>
DOM 版本：	2 级活动

更多示例

示例

使用焦点和模糊属性：

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

亲自试一试 »

示例

事件委托：使用重点和模糊事件：

放使用捕获addEventListener() 的参数为真的:

<form id="myForm">
<input type="text" id="myInput">
</form>

<script>
let 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>

亲自试一试 »

示例

事件委托：使用专注于和聚焦事件：

<form id="myForm">
<input type="text" id="myInput">
</form>

<script>
let 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>

亲自试一试 »

浏览器支持

onblur是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮上一节活动参考下一节❯