转载: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. windows下安装和配置redis

    1.windows下安装和配置redis 1.1 下载: 官网(linux下载地址):https://redis.io/ Windows系统下载地址:https://github.com/MSOpen ...

  2. Selenium环境搭建---C#

    最近在学习Selenium,主要看的是C#版和java版,目前先搭建好了C#的环境,java的后期再搭建,这里先总结一下在vs2013里搭建环境时所遇到的坑,以便分享和后期避免. 首先就是seleni ...

  3. sqlmap简单使用

    就以实验吧上那个简单的sql注入题为例吧,不过那道题确实经典,把sqlmap的整个使用过程都展现了一遍,先奉上那道题的地址:http://ctf5.shiyanbar.com/web/index_3. ...

  4. 【枚举】Consonant Fencity @upcexam5110

    时间限制: 3 Sec 内存限制: 512 MB 题目描述 There are two kinds of sounds in spoken languages: vowels and consonan ...

  5. 【转】SQL Server 事务隔离级别详解

    SQL 事务隔离级别 概述 隔离级别用于决定如果控制并发用户如何读写数据的操作,同时对性能也有一定的影响作用. 步骤 事务隔离级别通过影响读操作来间接地影响写操作:可以在回话级别上设置事务隔离级别也可 ...

  6. Java知识回顾 (8) 集合

    早在 Java 2 中之前,Java 就提供了特设类.比如:Dictionary, Vector, Stack, 和 Properties 这些类用来存储和操作对象组. 虽然这些类都非常有用,但是它们 ...

  7. APP中的图片如何长按可以下载并保存图片到相册

    直接上图 方式一: 实现方式二: 方式三:

  8. ABAP表抛FTP通用程序

    主要功能: 1.支持R3所有表(标准.自建)下传,下传方式为FTP 2.支持输出字段选择及顺序调整 3.支持动态条件,不同的表会有不同的选择条件,根据不同的条件选择需要下传的数据 4.支持单表.多表. ...

  9. 罗技Setpoint控制酷狗等第三方播放器

    手里有个淘过来的二手戴尔蓝牙键盘,虽然是戴尔的,但是确实罗技代工的,因此可以使用罗技的Setpoint,用这个软件后可以集中管理罗技的键盘鼠标进行一些个性化设置,如下图所示.不过郁闷的是如果不装Set ...

  10. CentOS安装mariadb做为mysql的替代品

    mariadb做为mysql的替代品 现在centos的新版本yum包已换成mariadb 安装一些库 yum install gcc gcc-c++ wget net-tools 复制代码 查看SE ...