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值是负数的对象会被忽略

时间: 2024-08-17 18:14:35

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

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

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

<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1200px;z-index:1;position:absolute;"></div> echart在IE中使用时,在div中添加postion后图表不显示.主要问题是echart在编译后给div增加了filter,使div隐藏起来了,如图: 修改办法的话,当然就是删除啦,一是找到e

HTML中关于鼠标指向改变div显示

利用样式表中 display属性来实现 例如 <html> <title>aaaaa</title> <head> <style> #changing1{ width:980px; height:760px; left:0px; top:50px; position:absolute; background-image:url(images/xs1.png); display:block;}#changing2{ width:980px; hei

jquery 实践操作:div 动态嵌套(追加) div

此片记录在指定 div 中动态添加 div html(): append(): 在被选元素的结尾(但仍在元素内部)插入指定的内容. 语法: $(selector).append(content); //其中,参数content是必需的,指定要附加的内容. append 能够使用函数给被选元素附加内容,语法为: $(selector).append(function(index,html)); //function()是必需的,参数index和html都是可选的.index表示接收选择器的inde

2016/3/30 ①投票checkbox ②进度条两个div套起百分比控制内div(width) &lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; ③数据库test2 表 diaoyan... 35岁发展方向投票

分两个页面,要点:提交form 相连action method  两个页面可以合成一个页面action传到自身页面   但分开较清晰 第一个页面vote.php 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="h

完美实现控制DIV最小高度和DIV自适高度

本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度.当里面的信息很少时候,我们就设置它一个最小的固定高度. 如何控制DIV最小高度又DIV自适高度 我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个DIV高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度.当里面的信息很少时候,我们就设置它一个最小的固定高度. 我们知道,在IE6中,如

Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮

纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片. 值得注意三点: 1.其中,主要使用了rotate.它能让文字旋转角度 2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间. 3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值." 1 &

input文本框获取焦点和失去焦点事件判断

onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onBlur=" " onFocus=" " /> 使用jQuery的实现方法为: 对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur(). focus():得到焦点时使用,blur():失去焦点时使用. 代码如下: $("inpu

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局,体感音乐一般使用CSS样式表加DIV标签组合进行布局网页. div层一般包括div浮动层,div浮动层说明div被加入css浮动样式所以被称为div浮动层,而没有加入float浮动样式不具有浮动效果,所以如果没有被加浮动样式div不被称为浮动层.当然span.h1.ul.li等标签也是层,只不过span.h1.ul.li等标签没有div使用频率高,所以一般就将div作为象征性称呼. 接下来DIVCSS5通过实例告诉大家什么是一般层,什么是浮动层?为什么