1. 程式人生 > >讓HTML標籤、DIV、SPAN擁有focus事件和blur事件,聚焦和失焦

讓HTML標籤、DIV、SPAN擁有focus事件和blur事件,聚焦和失焦

DIV和其他普通標籤是不具有onfocus和onblur事件的。
INPUT和A標籤為什麼擁有?而DIV和SPAN等普通標籤卻沒有?
有時候我們習慣性用鍵盤的TAB來移動游標,仔細看你會發現,游標只在INPUT和A上跳轉。
因為INPUT和A標籤具備TAB屬性。
我們只需要給DIV或者SPAN等普通標籤建立TAB,這些普通標籤就擁有了TAB屬性。
以DIV為例: 
讓DIV擁有TAB並具有onfucus和onblur屬性。
給元素建立TAB屬性:tabindex=引數(這裡和z-index類似,計算TAB起點)。 


<div tabindex="0" hidefocus="true" onfocus='alert("得到焦點");' onblur='alert("失去焦點");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;">讓HTML標籤、DIV、SPAN擁有onfocus和onblur,聚焦和失焦</div>

注:定義TAB屬性後,元素是預設會加上焦點虛線的,那麼在IE中可以通過hidefocus="true"去除!其他瀏覽器通過outline=0進行去除