div.onblur的两个解决方法、跳出详细框的控制
来源:互联网 发布:mysql 两个字段排序 编辑:程序博客网 时间:2024/05/21 14:49
1.document.onclick
<div id="div1" onclick="test()">fff</div>
<div id="div2" style="display:none;width:200px;height:120px;"><input type="button" value="hide"/></div>
<script type="text/javascript">
function test () {
document.getElementById("div2").style.display="";
document.getElementById("div2").focus();
}
function hide (event) {
event=(event==null)?window.event:event;
var div2=document.getElementById("div2");
var div1=document.getElementById("div1");
var target_test=event.target?event.target:event.srcElement;
(target_test!=div2) && (target_test!=div1)?div2.style.display='none':null;
}
document.onclick=hide;
</script>
虽然没有用onblur,但是实现的效果是同样的
关于DIV的ONBLUR,IE(要设置div的大小) 支持,FF(要设置div的大小和设置tabindex属性)
2.tabindex="0" onbulr的做法
<div id="div3" onclick="test()">fff33</div>
<div id="div4" tabindex="0" onblur="hide()" style="display:none;width:200px;height:120px;"><input type="button" value="hide"/></div>
<script type="text/javascript">
function test () {
document.getElementById("div4").style.display="";
document.getElementById("div4").focus();
}
function hide () {
var div2=document.getElementById("div4");
div2.style.display='none';
}
</script>
这个实现的比较简单,但是不好的地方是在ie8下 div有一个虚线框,不晓得有没有办法去掉
解决方法就是 在firefox 的情况下 加属性tabindex="0" ,在ie的情况下不需要加这个
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/saiusky/archive/2009/08/06/4419429.aspx
tabIndex:
当使用键盘时,tabindex是个关键因素,它用来定位html元素。
tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)
原本在Html中,只有链接a和表单元素可以被键盘访问(即使是a也必须加上href属性才可以),但是aria允许tabindex指定给任何html元素。
当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。
当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。
当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。
在IE中,tabindex范围在1到32767之间(包括32767)
在FF, Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时一样。
这个估计跟各个浏览器对int型的解析有关。
- div.onblur的两个解决方法、跳出详细框的控制
- div.onblur的两个解决方法、跳出详细框的控制
- div.onblur的两个解决方法
- div.onblur的两个解决方法
- 跳出循环的两个方法
- 跳出程序的循环控制
- 浏览器网页的onblur
- js 的 onblur 事件
- JS中控制两个div的高度保持一致
- 关于跳出学校机房老师的控制
- Java的三种跳出控制语句
- 两个div之间有空隙的起源和解决方法
- 关不掉的跳出框
- 两个相连的div
- div层的控制
- 控制DIV的选取
- div的控制
- onblur的死锁和解决方案
- Android 图片旋转
- JavaScript 开发者经常忽略或误用的 7 个基础知识点
- ubuntu 环境 软件安装
- 用逗号来格式化数字
- WinForm使用的缓存类
- div.onblur的两个解决方法、跳出详细框的控制
- android开发给eclipse安装ADT插件遇到NDK pluign无法安装的错误
- 技术篇--shell中只列出目录的方法
- python实现网络爬虫学习总结
- 感想
- 页面自动执行(加载)js的几种方法
- 移动端小技巧
- SQL高效先进先出算法
- 图形编程——Paint和Canvas的基本使用