html中div获取焦点,去掉input div等获取焦点时候的边框
经测试只有在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等获取焦点时候的边框的更多相关文章
- input+div 下拉选择框
前台html页面 <html> <head> <meta name="viewport" content="width=device-wid ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- 在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- div中嵌套的多个div使用了浮动后居中的办法
今天做网页的时候遇到了标题中的问题,网上查到了解决办法,记录一下一放以后忘记 <div class="wai"> <div style="float:l ...
- 解决echart在IE中使用时,在div中加入postion后图表不显示问题
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1 ...
- 大div中,三个小div水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- win8 下脚本安装IIS
@echo off echo 正在添加IIS8.0 功能,依据不同的网络速率,全程大约需要5分钟时间... start /w pkgmgr /iu:IIS-WebServerRol ...
- maven的安装和eclipse的配置以及构建mahout基本项目
maven介绍在此略过 下载地址: 点击打开链接 windows下载xxx-bin.zip文件 linux下载xxx-bin.tar.gz 这里以windows为例 下载完成直接解压到一个目录下 计算 ...
- linux的chmod命令
chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录的权限, ...
- jQuery 全选 正反选
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...
- LintCode - Merge Two Sorted List
LintCode - Merge Two Sorted Lists LintCode - Merge Two Sorted Lists Web Link Description Code - C Ti ...
- Java中Vector与ArrayList的差别具体解释
首先看这两类都实现List接口,而List接口一共同拥有三个实现类.各自是ArrayList.Vector和LinkedList.List用于存放多个元素,可以维护元素的次序,而且同意元素的反复. 3 ...
- MPTCP 源码分析(六) 数据重发
简述 TCP使用定时器函数tcp_retransmit_timer进行数据重发,MPTCP需要重发数据的时候, 不仅仅在原路径发送数据,而且会在另外一条子路径进行重发.这样考虑的原因是: 考 ...
- ajax 底层源码解析
对象: XMLHttpRequest 属性:readyState请求状态,开始请求时值为0直到请求完成这个值增长到4 responseText目前为止接收到的响应体,readyState<3此属 ...
- cocos2d-x OpenGL ES 坐标系总结
很多教程都说cocos2d-x OpenGL ES世界坐标系原点在左下角,但至于为什么在左下角却从来没有人提过,这导致大部分人觉得这是OpenGL ES的规定,事实上这是错的.OpenGL ES的坐标 ...
- bootstrap资料链接
别人的博客,写的还不错 http://www.cnblogs.com/hnnydxgjj/category/879277.html