经测试只有在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. Centos6.5搭建RHCS集群-实现GFS+iSCSI网络共享存储

    RHCS集群配置 需要用到的各组件功能:RHCS(Red Hat Cluster Suite):能够提供高可用性.高可靠性.负载均衡.存储共享且经济廉价的集群工具集合.LUCI:是一个基于web的集群 ...

  2. angular - 如何运行在起来 - 使用nginx

    nginx下载地址,使用的是标准版的: 点击下载nginx nginx下载完后,解压 dist文件夹下面所有angular文件放入html文件夹中. 最后命令行cd到当前nginx.exe目录,启动命 ...

  3. S7:享元模式 Flyweight

    运用共享技术有效的支持大量细粒度的对象. 应用场景: A.减少对相同对象的重复创建 UML: 示例代码:如果在工厂中,有用户,我们就直接调用,没有用户,我们就获取.减少对同一uid的user对象的重复 ...

  4. 使用Nginx+uWSGI+Django方法部署Django程序(下)

    在上一篇文章<五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(上)>中,阐述了如何只使用uWSGI来部署Django程序. 当然,单单只有uWSGI是不够的, ...

  5. [C++设计模式] command 命令模式

    在软件系统中,"行为请求者"与"行为实现者"通常呈现一种"紧耦合". 但在某些场合,比方要对行为进行"记录.撤销/重做.事务&qu ...

  6. MySQL存储过程详解 mysql 存储过程(转)

    mysql存储过程详解 1.      存储过程简介   我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的S ...

  7. JavaScript | 基础表单验证(纯Js)

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  8. hiredis学习整理

    hiredis安装 http://blog.csdn.net/aizquan/article/details/20777453 http://blog.csdn.net/zhwei_87/articl ...

  9. 经常使用的Hql语句

    // HQL: Hibernate Query Language. // 特点: // >> 1,与SQL类似.SQL中的语法基本上都能够直接使用. // >> 2.SQL查询 ...

  10. 实现html锚点的两种方式

    1,a标签+name属性. 2,使用标签的id属性: