DIV和其他普通标签是不具有onfocus和onblur事件的。
INPUT和A标签为什么拥有？而DIV和SPAN等普通标签却没有？
有时候我们习惯性用键盘的TAB来移动光标，仔细看你会发现，光标只在INPUT和A上跳转。
因为INPUT和A标签具备TAB属性。
我们只需要给DIV或者SPAN等普通标签创建TAB，这些普通标签就拥有了TAB属性。
以DIV为例： 
让DIV拥有TAB并具有onfucus和onblur属性。
给元素创建TAB属性：tabindex=参数(这里和z-index类似，计算TAB起点)。

<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;">让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦</div>

注：定义TAB属性后，元素是默认会加上焦点虚线的，那么在IE中可以通过hidefocus="true"去除！其他浏览器通过outline=0进行去除

让HTML标签、DIV、SPAN拥有focus事件和blur事件，聚焦和失焦的更多相关文章

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

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

  2. focus /focusin /focusout /blur 事件

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

  3. 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]

    例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...

  4. input 输入框 change 事件和 blur 事件

    输入框的 change 和 blur  事件绝大多数情况下表现是一致的,输入结束后离开输入框会先后触发 change 和 blur.那么这两个事件的区别在哪呢? 当文本框获得焦点后,没有输入任何内容, ...

  5. jquery点击click事件和blur事件冲突如何解决

    最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...

  6. 【jQeury】input输入框状态，input事件，blur事件，focus事件

    //输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...

  7. element-ui <el-input> 注册blur事件

    <template> <div class="demo"> <el-input placeholder="注册blur事件" v- ...

  8. HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

    摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...

  9. 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

随机推荐

  1. javascript报错集锦

    1.JS 异常之 missing ) after argument list 错误释疑报错原因:不是字符串就输出啦

  2. jQuery easyUI的datagrid，如何在翻页以后仍能记录被选中的行

    1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  3. hibernate 一级缓存，二级缓存，查询缓存

    1.一级缓存是session级的缓存,session结束即事务提交,session关闭,缓存清除.效果不大 get方式:一个session内,第二次查询不连数据库.适用于一级缓存 load方式:懒加载 ...

  4. python使用paramiko自动化部署linux程序

    使用paramiko模块,比os模块和command模块更加的兼容各种环境.后面两个只能在服务器本机 执行,此模块写得python文件无论是在本地还是服务器本身上运行,都能兼容. paramiko模块 ...

  5. MVC5 Entity Framework学习之实现主要的CRUD功能

    在上一篇文章中,我们使用Entity Framework 和SQL Server LocalDB创建了一个MVC应用程序,并使用它来存储和显示数据.在这篇文章中,你将对由 MVC框架自己主动创建的CR ...

  6. Android和IOS开发学习路线

    图片看上去太小,直接另存为吧 图片来自:http://www.finalshares.com/

  7. joda time， jackson 与 scala 反射

    1. scala 反射,获得所有 field name 可以直接从 case class 获得 field 而不必创建实例 (get fields of a class without an inst ...

  8. GSAP JS基础教程--使用缓动函数

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

  9. selenium之 chromedriver与chrome版本映射表(更新至v2.31)

    转自:http://blog.csdn.net/huilan_same/article/details/51896672 chromedriver版本 支持的Chrome版本 v2.31 v58-60 ...

  10. java-使用SImpleDateFormat格式化时间输出

    之前有篇博客是使用NSDateFormatter来对时间进行格式化输出,但使用起来有点繁琐,今天介绍下最近刚刚使用的SimpleDateFormat. public class SimpleDateF ...