让元素获得焦点
一般而言，只有表單元素與鏈接才能使用focus與blur事件，因此jQuery對于許多元素就歇菜了。但只要為元素節點設置一個tabindex屬性，非表單元素也可能使用這兩種事件。
但默認能使用焦點事件的元素一般也支持tabindex事件。為什么這么說呢？因為實質上，默認支持焦點事件的元素并不只這些，IE還默認body, frame, iframe, img, isIndex, object具有獲取失去焦點的能力。對于其他標準瀏覽器，它們之間還可能存在差異。因此我們不能單純地通過排除法，為非焦點元素添加tabindex屬性。而是轉而用一種更好的方法，通過檢測當前元素是否已經（顯式地或隱式地）設置了該屬性，才做進一步的操作。如下是檢測函數：
var hasAttr = function(el, name){var attr = el.getAttributeNode && el.getAttributeNode(name);return attr ? attr.specified : false}如果返回值為false，我們就為該元素設置tabindex屬性。對于tabindex屬性，w3c對此也作出相應現范。如果tabindex為負數，那么元素就不能使用tab鍵進行導航，但還能獲得焦點。如果位于 0 到 32767之間，則可以根據tabindex的值進行導航。如果當幾個元素的tabindex同為零時，則以文檔流的順序執行導航。更多與tabindex相關的資料，可以參看我的另一篇文章。
通過上面的分析，無疑將tabindex設為負數最安全，這樣就不會破壞原有的tab導航系統。順便一提，獲得焦點后，元素有一個虛線框，總有人挖空心思把它去掉。其實這無疑是對頁面易用性的踐踏，我們還要考慮一下某些特殊人群的需要，如不用鼠標的高手，鼠標壞了的可憐人或是視力有缺陷的人群。有文章介紹，去掉虛線框在美國是違法的，這是對視力障礙者的一種歧視！
下面給出完整的程序：
var hasAttr = function(el, name){var attr = el.getAttributeNode && el.getAttributeNode(name);return attr ? attr.specified : false}var addEvent = function(obj,type,callback){if ( obj.addEventListener ) {obj.addEventListener( type, callback, false );} else if ( obj.attachEvent ) {obj.attachEvent( "on" + type, callback );}}var focus = function(el,fn){if(!hasAttr(el,"tabindex"))el.tabIndex = -1;addEvent(el,"focus",function(e){fn.call(el,(e || window.event));});} <!doctype html> <html lang="zh-ch"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>讓元素獲取焦點 by 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var hasAttr = function(el, name){ var attr = el.getAttributeNode && el.getAttributeNode(name); return attr ? attr.specified : false } var addEvent = function(obj,type,callback){ if ( obj.addEventListener ) { obj.addEventListener( type, callback, false ); } else if ( obj.attachEvent ) { obj.attachEvent( "on" + type, callback ); } } var focus = function(el,fn){ if(!hasAttr(el,"tabindex")) el.tabIndex = -1; addEvent(el,"focus",function(e){ fn.call(el,(e || window.event)); }); } focus(document.getElementById("aaa"),function(e){ alert(e.type) alert(this.innerHTML) }); } </script> <style type="text/css"> body { padding:20px 100px; } a{ color:#FFDEAD; } #aaa { padding:10px; width: 100px; height: 100px; background:#4DC2F2; color:#FF8C00; font-weight:bolder; } </style> </head> <body> <h1><a href="http://www.cnblogs.com/rubylouvre/archive/2010/05/03/1726334.html">讓元素獲取焦點</a></h1> <div id="aaa" > 讓元素獲取焦點 </div> </body> </html>運行代碼
總結
- 上一篇： [前端技术]如何加深对JavaScipt
- 下一篇： Windows域内的时间同步