div,span等標籤支持focus/blur事件

<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>

加入tabindexdiv便可通過tab或點擊的方式獲得焦點,也可通過js的focus方法獲得

css中去除獲得焦點狀態下的邊框:outline:none;


DIV焦點事件

div本來是沒有focusblur事件的。

如果用div來模擬一個input標籤,同時需要它和input一樣響應focusblur事件,就需要給他加上attribute:tabindex

只要元素的tabIndex屬性設置成任何有效的整數那麼該元素就能取得焦點。元素在取得焦點後就能觸發onblur,onfocus,onkeydown, onkeypressonkeyup事件。

不同tabIndex值在tab order(Tabbing navigation)中的情況:

  • tabIndex值是正數的對象根據遞增的值順序和代碼中的位置順序來被選擇
  • tabIndex值是0的對象根據在代碼中的位置順序被選擇
  • tabIndex值是負數的對象會被忽略
obj.style.outline="none";

如果獲得焦點的時候出現虛線框可以這樣去除。

另外,focus並不會冒泡(w3c標準)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章