经测试只有在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. 使用JMeter3.0实战之分布式并发测试以及web API接口测试

    简介: 该文档是以Apche JMeter-3.0为例进行编写的,通过网上的学习资料和官方文档的说明手册学习后,进行项目操作实践,将测试的过程记录下提供给大家学习. 本博文的内容主要是进行配置JMet ...

  2. Node.js meitulu图片批量下载爬虫1.04版

    //====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...

  3. python基础语法(四)

    --------------------------------------------接 Python 基础语法(三)---------------------------------------- ...

  4. 《Docker 入门与实践》 已经出版了~欢迎有须要的朋友关注。

    在云计算时代.开发人员将应用转移到云上已经攻克了硬件管理的问题,然而软件配置和管理相关的问题依旧存在. Docker的出现正好能帮助软件开发人员开阔思路.尝试新的软件管理方法来解决问题. 通过掌握Do ...

  5. (三)Maven基本概念——常用插件的配置

    看注释———— pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  6. vb.net版机房收费——助你学会七层架构(二)反射+抽象工厂

    上一篇咱们做好了准备工作.数据库设计和Entity层,如今介绍 4.反射+抽象工厂 反射:用来消除Switch和if的,这里我尽量简单地介绍,以便大家理解.反射其有用起来非常easy.你就觉得他就是决 ...

  7. kafka分布式搭建

    kafka分布式搭建 (192.168.230.129)master (192.168.230.130)slave1 (192.168.230.131)salve2 在master.slave1.sl ...

  8. STM32在程序运行过程中关闭定时器重新打开后定时器不工作的问题

    问题:数码管显示程序放在定时TIM2中断函数里面扫描,想要实现在关闭某一功能的时候数码管不显示. 刚开始的想法是开关关闭,关闭定时器时钟:开关打开,打开定时器时钟:(但实验证明再次打开开关时定时器2却 ...

  9. VS2015 解决方案 或者项目 卡 正在加载 的解决办法

    导致项目无法打开以及VS无法关闭. 解决方法: 1.关闭VS: 2.去C:\Users\<your users name>\AppData\Local\Microsoft\VisualSt ...

  10. 关于http和rpc的区别(segmentfault上的回答)

    问题最近用了谷歌的grpc,所以对rpc和http有一点疑惑,感觉这两个东西功能上是一样的,rpc某个服务监听某一个方法,客户端调用这个方法,返回相应的数据,和http监听某个方法的路由 返回相应的数 ...