经测试只有在IE chrome才会在获取焦点时有边框

使用CSS

div{
outline:none;
}

DIV焦点事件详解 --【focus和tabIndex】​

摘自:http://my.oschina.net/jgy/blog/131970

添加 tabindex='-1' 属性;

默认:获取不到焦点事件(blur)

<div class="wl-product" id="wl-product"></div>

可以获取焦点事件(blur)

<div class="wl-product" id="wl-product" tabindex='-1'></div>

首先看看w3c关于onfocus的部分
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. 
This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 
当元素通过指定(点击)或tab导航(Tabbing navigation)获得焦点,onfocus事件就会触发。
该属性会使用在以下元素(就是说默认可以获取焦点的元素):A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

div, frameSet, span, table, td.只有设置tableindex才能获取焦点,但

IE默认能获取焦点但不能tab导航

不同tabIndex值在tab order(Tabbing navigation)中的情况:
Objects with a positive tabIndex are selected in increasing iIndex order and in source order to resolve duplicates.
Objects with an tabIndex of zero are selected in source order. 
Objects with a negative tabIndex are omitted from the tabbing order.
tabIndex值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择
tabIndex值是0的对象根据在代码中的位置顺序被选择
tabIndex值是负数的对象会被忽略

html中div获取焦点,去掉input div等获取焦点时候的边框的更多相关文章

  1. input+div 下拉选择框

    前台html页面 <html> <head> <meta name="viewport" content="width=device-wid ...

  2. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  3. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  4. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  5. html5中如何去掉input type date默认

    html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...

  6. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  7. div中嵌套的多个div使用了浮动后居中的办法

    今天做网页的时候遇到了标题中的问题,网上查到了解决办法,记录一下一放以后忘记 <div class="wai"> <div style="float:l ...

  8. 解决echart在IE中使用时,在div中加入postion后图表不显示问题

    <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1 ...

  9. 大div中,三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. win8 下脚本安装IIS

    @echo off      echo 正在添加IIS8.0 功能,依据不同的网络速率,全程大约需要5分钟时间...      start /w pkgmgr /iu:IIS-WebServerRol ...

  2. maven的安装和eclipse的配置以及构建mahout基本项目

    maven介绍在此略过 下载地址: 点击打开链接 windows下载xxx-bin.zip文件 linux下载xxx-bin.tar.gz 这里以windows为例 下载完成直接解压到一个目录下 计算 ...

  3. linux的chmod命令

    chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录的权限, ...

  4. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  5. LintCode - Merge Two Sorted List

    LintCode - Merge Two Sorted Lists LintCode - Merge Two Sorted Lists Web Link Description Code - C Ti ...

  6. Java中Vector与ArrayList的差别具体解释

    首先看这两类都实现List接口,而List接口一共同拥有三个实现类.各自是ArrayList.Vector和LinkedList.List用于存放多个元素,可以维护元素的次序,而且同意元素的反复. 3 ...

  7. MPTCP 源码分析(六) 数据重发

    简述      TCP使用定时器函数tcp_retransmit_timer进行数据重发,MPTCP需要重发数据的时候, 不仅仅在原路径发送数据,而且会在另外一条子路径进行重发.这样考虑的原因是: 考 ...

  8. ajax 底层源码解析

    对象: XMLHttpRequest 属性:readyState请求状态,开始请求时值为0直到请求完成这个值增长到4 responseText目前为止接收到的响应体,readyState<3此属 ...

  9. cocos2d-x OpenGL ES 坐标系总结

    很多教程都说cocos2d-x OpenGL ES世界坐标系原点在左下角,但至于为什么在左下角却从来没有人提过,这导致大部分人觉得这是OpenGL ES的规定,事实上这是错的.OpenGL ES的坐标 ...

  10. bootstrap资料链接

    别人的博客,写的还不错 http://www.cnblogs.com/hnnydxgjj/category/879277.html