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. scala中获取Map中key和value的方法

    val scores=Map("Alice"->10,"Bob"->3,"Cindy"->8) // 获取所有的key v ...

  2. linux 中搜索命令的对比

    1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...

  3. logback.xml常用配置详解

    <?xml version="1.0" encoding="UTF-8"?><configuration debug="false& ...

  4. 利用函数来得到所有子节点号& 利用函数来取得最高级的节点号

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  5. [Ubuntu] geoip-bin 程序包 - 查询 IP 归属地

    简述:在Linux命令行下查询IP归属地. 对Ubuntu/Debian系统,使用APT命令进行安装: $ sudo apt-get install geoip-bin 该包由MaxMind提供,它同 ...

  6. Eclipse新建动态web工程项目出现红叉解决方案

    问题描述:之前新建动态web工程一直没有问题,今天新建一个项目后项目名称上突然出现小红叉,子目录文件没有红叉. 解决过程:一开始想到的就是编译器的level设置,调整了一下,仍然没有解决. 然后在标记 ...

  7. SQL - 根据天来分组比较

    SELECT COUNT(*) FROM (SELECT WeixinUserID,CONVERT(varchar(100),CreateTime, 23) AS DT FROM SiteVisite ...

  8. 【加解密专辑】对接触到的PGP、RSA、AES加解密算法整理

    先贴代码,有空再整理思路 PGP加密 using System; using System.IO; using Org.BouncyCastle.Bcpg; using Org.BouncyCastl ...

  9. 【sql进阶】查询每天、每个设备的第一条数据

    需求如下 每个设备(不同DeviceID).每天会向数据库插入多条数据,求每天.每个设备插入的第一条数据. 下面SQL中的 ShareRecommendID 类比不同设备的DeviceID. ROW_ ...

  10. 【docker】使用docker 安装 宝塔面板

    拉取centos基础镜像,用容器启动该基础镜像,直接在这个容器中部署 1 拉取纯净系统镜像 docker pull centos: 2 启动镜像,映射主机与容器内8888端口 docker run - ...