Posted on 2011-12-09 20:07
xcp 閱讀(2926)
評論(4) 編輯 收藏 所屬分類:
Javascript
首先讓我們看看哪些元素可以直接獲得焦點element..focus()// Form : http://www.w3.org/TR/html5/editing.html#focusable
- a elements that have an href attribute
- link elements that have an href attribute
- button elements that are not disabled
- input elements whose type attribute are not in the Hidden state and that are not disabled
- select elements that are not disabled
- textarea elements that are not disabled
- command elements that do not have a disabled attribute
- Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those elements without the use of a pointing device
- Each shape that is generated for an area element
- …
而除上面以外的元素（比如：div，p）一般都無法直接獲得焦點，那如何處理呢？
- 給元素添加 contenteditable 屬性。
// From : http://www.w3.org/TR/2009/WD-html5-20090423/editing.html#attr-contenteditable
User agents must make editing hosts focusable (which typically means they enter the tab order).
- 給元素添加 tabindex 屬性。
// From : http://www.w3.org/TR/2009/WD-html5-20090423/editing.html#attr-tabindex
The tabindex content attribute specifies whether the element is focusable, whether it can be reached using sequential focus navigation, and the relative order of the element for the purposes of sequential focus navigation.
非常推薦使用tabindex = -1 ，基本無副作用！！
// From : http://www.w3.org/TR/2009/WD-html5-20090423/editing.html#attr-tabindex
If the value is a negative integer: The user agent must allow the element to be focused, but should not allow the element to be reached using sequential focus navigation.
綜述，使無法直接獲得焦點的元素獲得焦點的最佳實踐就是：給元素添加tabindex = -1
名稱: ?4C.ESL | .↗Evon
口號: 遇到新問題?先要尋找一個方案乄而不是創造一個方案こ
mail: 聯系我