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. datatable编辑一行数据的方法

    let d =t.row($(e).parents("tr")).data(); 上面的是获取一行数据的方法,如果是更改一行数据,则传入根之前数据结构相同的对象或者数组即可: t. ...

  2. Win7 共享打印机 “错误：共享无法保存设置”

    原因:windows的后台防火墙服务进程[Windows Firewall{服务描述}.MpsSvc{服务名字}] 关闭了.services.smc 关闭 解决:重启服务 关闭防火墙的功能,通过控制面 ...

  3. 多页Excel转换成PDF时如何保存为单独文件

    通过ABBYY PDF Transformer+图文识别软件,使用PDF-XChange打印机将多页Excel工作簿转换成PDF文档(相关文章请参考ABBYY PDF Transformer+从MS ...

  4. QT编译错误：invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEvent'

    执行3D常将中实体的pick操作,结果出现了编译错误:invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEven ...

  5. JSP输出当前日期

    如何在网页中动态交互,输出当前日期? <%@ page language="java" import="java.util.*" contentType= ...

  6. phoenix连接hbase数据库，创建二级索引报错：Error: org.apache.phoenix.exception.PhoenixIOException: Failed after attempts=36, exceptions: Tue Mar 06 10:32:02 CST 2018, null, java.net.SocketTimeoutException: callTimeou

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  7. 【12月06日】A股全市场情绪指标整理分析

    1. A股全市场的股权质押比例 2018年11月30日,A股全市场,质押股数占全市场总股本数比:9.997%,最近2周出现了3.2%的轻微回落.同历史时期相比,仍然处于高位. 2. A股全市场的解禁市 ...

  8. convertView&setTag方法的一点理解

    前言 首先我们要知道setTag方法是干什么的,SDK解释为 Tags Unlike IDs, tags are not used to identify views. Tags are essent ...

  9. Layui：设置select下拉框自动选中某项

    1.问题:layUI,在做编辑功能有下拉框数据时,需要初始化选中某个值,layUI官网没有相关api,可能我比较笨没找到 2.解决思路:出发点击事件 3.分析dom树结构,出发dl点击事件 方法: v ...

  10. Python easyGUI 文件对比 覆盖保存

    #在35-3的基础上进行优化,当用户点击ok按钮的时候,对打开的文件进行检查是否修改.# 如果修改过,则提示覆盖保存.放弃保存.另存为并实现相应的功能 1 import easygui as g im ...