转载：http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html

默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的，经我长久论证因为他们不具有tab属性，所以只要我们创建tab，那么任何标签都可以具有tab属性。

什么标签具有tab呢？显然input和a是得天独厚的具有，我们经常用键盘上的tab键进行移动光标的时候，我们发现光标只在具有tab属性的元素上进行跳转。

我们现在来让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;"></div>

看到这里你了解了吧！

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

真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦的更多相关文章

  1. 让HTML标签、DIV、SPAN拥有focus事件和blur事件，聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

  2. 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规则,类 ...

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

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

  4. div/span等获取焦点问题(tabindex属性的简单理解)

    1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...

  5. img标签与span一起使用不在同一条线上

    布局时 img标签与span标签在同一行是不能垂直,解决办法:在 img标签添加一个 vertical-align:middle; 即 <!-- img与span的文字与图片保持同一条水平线 在 ...

  6. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  7. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  8. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  9. CSS 让div,span等块级、非快级元素排列在同一行

    让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...

随机推荐

  1. Flask对象配置

    Flask的配置就是在 app.config 中添加一个键值对,但是你存进去的键必须是config中应该存在的,如果不再存在的话,它会默认无用,就这么放着 config中有用的key { 'DEBUG ...

  2. WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: <NSInvalidArgumentException> -[__NSArrayM objectForKey:]: unrecognized s

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  3. UltraEdit使用（工具类似于notepad++）

    打开多个文件,在多个文件中切换,鼠标点/ Ctrl+Tab自动换行的设置: 高级-->配置-->编辑器-->自动换行,制表符设置-->默认为每个文件启用自动换行 去掉自动备份设 ...

  4. C# 计算地图上某个坐标点的是否在多边形内

    这个方法引用自群友的博客 https://www.xiaofengyu.com/?p=143 使用百度地图的时候,常常会用到判断一个点是否在一个多边形的范围内,该方法用到的是射线法, 通过修改Java ...

  5. 【数论&想法题】小C的问题 @"科林明伦杯"哈尔滨理工大学第八届程序设计竞赛

    Time Limit: 1000 MS Memory Limit: 256000 K Description 小C是一个可爱的女孩,她特别喜欢世界上最稳定的图形:三角形.有一天她得到了n根木棍,她把这 ...

  6. css冲刺

    CSS知识点及面试题 1.一般与文本相关的属性都可以继承text-/font-/line- 2.background属性1)background-repeat:repeat/repeat-x/repe ...

  7. Aizu2170 Marked Ancestor（并查集）

    https://vjudge.net/problem/Aizu-2170 并查集用于管理元素分组情况. 建树pre[]记录父节点,一开始只有结点1被标记了,所以find()最终得到的根都是1. 如果遇 ...

  8. 避免 Deepin 15.4 系统 界面卡顿、假死等现象：隐藏自带的“任务栏”，安装轻量级的“任务栏tint2”

    使用 Deepin 过程中,发现当点击“任务栏”上面的按钮,尤其是右键单击,选择菜单时,界面很容易卡顿,再也动弹不了. 好吧,,,就不使用自带的“任务栏”了,换成一个轻量级的“任务栏tint2”, 1 ...

  9. ps保存时提示最大兼容

    在菜单:编辑-首选项-文件处理可以设置要不要询问

  10. MySQL优化之like关键字

    1.%号不放最左边 无法使用索引了,开头是不确定的,MySQL也无法进行优化了,只能扫描表了. 2.使用覆盖索引 如果业务需要%就放开头我们也没办法,一般情况需求都是这样的,毕竟优化还是为业务服务的. ...