Posted on 2011-12-09 20:07
xcp 阅读(2920)
评论(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: 联系我