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 ...
随机推荐
- 接入WebSocket记录 + 一些个人经验
闲扯 WebSocket 以前没用过,之前写过一篇博客是基于原生socket的(查看)比较复杂,慎入.今天另外一个APP需要接websocket了,然后便找到了facebook的 SocketRock ...
- BZOJ 4174 tty的求助 莫比乌斯反演
题目大意:求∑Nn=1∑Mm=1∑m−1k=0⌊nk+xm⌋ mod 998244353 如果n和m都已经确定了.如今要求这坨玩应: ∑m−1k=0⌊nk+xm⌋ =∑m−1k=0(⌊nk%m+xm⌋ ...
- Centos 7 修改yum源为阿里源
因为官方的yum源在国内访问效果不佳, 需要改为国内比较好的阿里云或者网易的yum源, 具体修改步骤如下: cd /etc/yum.repos.d # 备份旧的配置文件 mv CentOS-Base. ...
- U盘制作linux centos6.5
2015年8月4日 1.下载ULTIso软件,注册 2.DVD1的那个拖进去 3.[一定要双击那个进去]才“写入硬盘镜像”,否则只“写入‘,还是一个iso文件,不是提取出来的文件. 4.覆盖相应的文件 ...
- 谷歌Cartographer学习 -快速安装测试
参考资料:https://www.cnblogs.com/hitcm/p/5939507.html PC下面进行安装: 遇到的问题如下 1.首先安装ceres solver 在编译的时候,如果是低配的 ...
- xml文件的增删改读
最近学习了利用XmlDocument对象对xml进行增删改读操作,就写了一个小的例子记录下来,加深印象,以后忘了也可以找出来看看. xml文件: <?xml version="1.0& ...
- NodeJS淘宝 CNPM 镜像
原文地址:http://npm.taobao.org/ 设置NPM镜像(前提已安装NodeJS): npm config set registry https://registry.npm.taoba ...
- linq-to-sql实现left join,group by,count
linq-to-sql实现left join,group by,count 用linq-to-sql实现下面的sql语句: SELECT p.ParentId, COUNT(c.ChildId) FR ...
- tcp/ip ---数据链路层
- 牛散NO.3:MACD放之四海 假作真时真亦假
大宗商品日线“异曲同工夺命勾魂枪” 话说有实战意义的技术在任何资本市场里都能产生出神奇的效果.不能说放之四海皆准,但至少起到触类旁通的“牵强”吧.大宗商品特别是在国际市场交易的大宗 商品由于是来自各方 ...