<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"></div>
div获得焦点
div
正常情况下是无法获得焦点的,所以其blur
方法和focus
方法都是没有用的,解决方案如下:
<div class="fileInfo" tabindex ="0"></div>
加入tabindex
后div
便可通过tab
或点击的方式获得焦点,也可通过js的focus
方法获得
css中去除获得焦点状态下的边框:outline:none;
DIV焦点事件
div
本来是没有focus
和blur
事件的。
如果用div
来模拟一个input
标签,同时需要它和input
一样响应focus
和blur
事件,就需要给他加上attribute:tabindex
只要元素的tabIndex
属性设置成任何有效的整数那么该元素就能取得焦点。元素在取得焦点后就能触发onblur,onfocus,onkeydown, onkeypress
和onkeyup
事件。
不同tabIndex
值在tab order
(Tabbing navigation)中的情况:
tabIndex
值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择tabIndex
值是0
的对象根据在代码中的位置顺序被选择tabIndex
值是负数的对象会被忽略
obj.style.outline="none";
如果获得焦点的时候出现虚线框可以这样去除。
另外,focus
并不会冒泡(w3c标准)