JS事件失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

理解onblur事件

最新推荐文章于 2024-02-16 17:42:45 发布

原创最新推荐文章于 2024-02-16 17:42:45 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web前端

JavaScript进阶篇专栏收录该内容

91 篇文章

订阅专栏

本文介绍了一个简单的HTML示例，展示了如何使用onblur事件来响应用户交互。当用户将光标从文本框移开时，会触发一个警告提示，确保用户已经输入了必要的信息。

失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

运行结果：

任务

补充右边编辑器第13行，当光标从密码文本框离开时，触发onblur 事件，调用message()函数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
  function message(){
    alert("请确定已输入密码后，在移开!"); }
</script>    
</head>
<body>
  <form>
   用户:<input name="username" type="text" value="请输入用户名！" >
   密码:<input name="password" type="text" value="请输入密码！" onblur="message()">
  </form>
</body>
</html>