<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標準)