DOM元素如何获得焦点
日期:2011-12-08 阅读:51 分类:HTML~CSS
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 属性。
当然你还可以通过子元素(focusable)的 focus 事件的捕获或冒泡来模拟,但需要处理事件的浏览器兼容(《如何在事件代理中正确使用 focus 和 blur 事件》)。
来自:planabc
相关文章
- getElementsByName 2008-10-15
- javascript中的Dom node操作 2009-02-05
- dom参考手册 2008-12-11
- 简单的dom遍历 2008-11-16
- 修改dom元素 2008-11-16
- 块级元素和内联元素 2008-08-26
- 获取dom元素文内容 2008-11-16
- html元素的type属性 2009-02-23
- VBScript中清除数组元素Erase语句 2009-01-14