失焦事件（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>

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

  1. JS事件 卸载事件 当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。注意：不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  2. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  3. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  4. JS事件 加载事件（onload）注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。 2. 此节的加载页面，可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  5. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  6. js jq输入框中按回车触发提交事件，用户在页面输入后按回车（Enter键）进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

  7. js 触发 change 事件

    首先,请各位包涵,我本人对 JS 不是很熟,不知道"触发change事件"和"触发onchange事件"哪个更加合适.有园友知道的麻烦指出,先行谢过. 起因是这 ...

  8. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

  9. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

随机推荐

  1. java连连看小项目

    /* *本人也是刚入门,希望各位多多指教 *该项目主要代码在于连线 *1.2个连线没有拐弯 *2.2个连线有一个拐弯 *3.2个连线有2个拐弯 *采用递归算法 */ package llk; impo ...

  2. python TypeError: ‘encoding’ is an invalid keyword argument for this function

    shell调用python脚本出现了这个问题,查询原因得知,python脚本是python3.6写的,我们服务器上默认的python是python2.7.3,所以会出现编码问题. 解决思路: 1.安装 ...

  3. JAVA求回文数

    Manacher算法(马拉车算法)时间复杂度O(n) 用过中心检测法(就是上面说的O(n2) O(n^2)O(n )的算法)的都知道对于奇数回文串和偶数回文串的处理是不同的,奇数回文串有2n+1 2n ...

  4. 前端（五）—— a、img、list标签

    a标签.img标签.list标签 一.a标签 1.常用用法 <a href="https://www.baidu.com">前往百度</a> <a h ...

  5. C# 简单的往txt中写日志,调试时很有用

    原文 http://blog.csdn.net/hejialin666/article/details/6106648 有些程序在调试时很难抓住断点(如服务程序),有些程序需要循环无数次,要看每一次或 ...

  6. VC++ 2010 创建高级Ribbon界面详解(4)

    5.辅助控件 除了前面我们介绍的按钮,工具栏,编辑框等基本控件外,为了支持现代软件对丰厚的界面交互方式的要求,Visual Studio 2010还提供了很多其他的辅助控件,例如我们通常会用到的“上一 ...

  7. rpm升级时spec文件执行的流程

    转自:https://www.cnblogs.com/zafu/p/7423758.html %pre 和 %post 脚本片段分别在软件包安装前和安装后执行.%preun 和 %postun 脚本片 ...

  8. Nginx学习——简介及常用命令

    Nginx简介 Nginx是什么 同Apache一样,都是一种WEB服务器 基于REST架构风格,以统一资源描述符(URI)或者统一资源定位符(URL)作为沟通依据,通过HTTP协议提供各种网络服务 ...

  9. Centos 能ping通域名和公网ip但是网站不能够打开，服务器拒绝了请求。打开80端口解决。

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/29/centos-%E8%83%BDping%E9%80%9A%E5%9F%9F%E ...

  10. 最长递增子序列nlogn的做法

    费了好大劲写完的  用线段树维护的 nlogn的做法再看了一下 大神们写的 nlogn  额差的好远我写的又多又慢  大神们写的又少又快时间  空间  代码量 哪个都赶不上大佬们的代码 //这是我写的 ...