blur事件是在元素失去焦点的时候触发,那么失去焦点的前提便是获得焦点。

哪些元素可以获取焦点呢?

  1.超链接
  2.input button textarea (without disabled)
  3.所有带有tabindex属性的未被disabled的元素

例如:

  

<a href="#" onblur="showMsg(this);">link</a>
<input onblur="showMsg(this);" type="text" />
<input onblur="showMsg(this);" type="text" disabled />
<p onblur="showMsg(this);">first p</p>
<p onblur="showMsg(this);" tabindex="1">second p</p> <script>
function showMsg(e){
alert(e.tagName);
}
</script>

要注意的是 chrome下面 除了文本域的点击事件是不会触发focus和blur的 但是你使用tab键可以触发

jQuery中一样 API是将blur放在了form events下面

一般情况下给html element 加上tabindex是兼容主流浏览器的

blur事件的更多相关文章

  1. input 的blur事件之后button的onclick事件不执行解决方案

    最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...

  2. 说说focus /focusin /focusout /blur 事件

    事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...

  3. 【原】相煎何太急——input的blur事件与button的click事件

    先来一段引子,最近在写手机h5页面,主要是一些登陆注册方面的,最绕不开的就是表单元素. 我想实现的是:在输入框后边有一个删除图标,当输入东西的时候触发事件,显示删除图标,点击该图标会删除之前输入的内容 ...

  4. jquery easyui textbox onblur事件,textbox blur事件无效解决方案

    jquery easyui textbox onblur事件,textbox blur事件无效解决方案 >>>>>>>>>>>> ...

  5. div无法触发blur事件解决的方法

    默认情况下div无法获取焦点,无法触发focus与blur事件,推測span,a等标签也无法触发焦点事件(input:button.及button标签能够触发) 怎样使div触发blur事件:能够给d ...

  6. focus、blur事件的事件委托处理(兼容各个流浏览器)

    今天工作中遇到个问题,问题是这样的,一个form表单中有比较多的input标签,因为form中的input标签中的值都需要前端做客户端校验,由于本人比较懒而且特不喜欢用循环给 每个input元素添加b ...

  7. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  8. vue中mint-ui的filed的与blur事件结合实现检查用户输入是否正确

    标题mint-ui的filed与blur事件验证用户输入格式是否正确说明:本人前端菜鸟,只是想借个地方做个笔记,为了以后查阅时比较方便.如有大神有什么建议的地方,欢迎提出来. 1.不得不说,mint- ...

  9. 下拉框click事件与搜索框blur事件的爱恨纠葛

    还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...

随机推荐

  1. CodeForces 670F Restore a Number

    模拟. 首先暴力找到答案的位数,然后就是分类讨论输出答案. #pragma comment(linker, "/STACK:1024000000,1024000000") #inc ...

  2. Python实现简单的HTTP服务器(支持文件上传下载)

    1.python内置模块 SimpleHTTPServer  (支持下载功能) 在对应的工作目录下,运行命令python -m SimpleHTTPServer 即可把当前目录下以共享服务的形式共享出 ...

  3. PHP控制连接打印机

    一.需求 使用PHP控制连接打印机 现场实时连续打印动态数据 二.配置 php运行环境正确安装(Apache|Nginx + PHP) 下载与php版本对应的php_printer.dll扩展 扩展文 ...

  4. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  5. [UWP小白日记-1]判断APP是否是第一次运行初始化SQLITE数据库

    利用应用程序设置来实现此功能. 1.首先,获取APP设置的容器: ApplicationDataContainer localSettings = ApplicationData.Current.Lo ...

  6. db2 表空间容器调整

    1.查看当前容器的分布,并确定如何调整 db2look -d sample -l -cor -dp -o dd.sql 2.给表空间添加容器 db2 "alter tablespace tb ...

  7. Lua: 给 Redis 用户的入门指导

    转自:http://www.oschina.net/translate/intro-to-lua-for-redis-programmers 可能你已经听说过Redis 中嵌入了脚本语言,但是你还没有 ...

  8. mongodb (一)

    #mongodb安装(3.4.0) #下载安装包,解压 mkdir /data/mongodb cd /data/mongodb mkdir log conf data bin vim conf/mo ...

  9. JS禁用右键,禁用打印,防止另存为,IE浏览器识别(转载)

    oncontextmenu="window.event.returnValue=false" style="overflow-y: hidden; overflow-x: ...

  10. ACdream 1732

    input 样例个数T           <=10000 每个样例一个n(2<=n<=10^8) output lcm(1,2,...,n)%2^32 Sample Input 5 ...