J2EE社区

苟有恒,何必三更起五更眠;
最无益,只怕一日曝十日寒.
posts - 241, comments - 318, trackbacks - 0, articles - 16

DOM元素如何获得焦点

Posted on 2011-12-09 20:07 xcp 阅读(2703) 评论(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)一般都无法直接获得焦点,那如何处理呢?

  1. 给元素添加 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).

  2. 给元素添加 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: 联系我


Feedback

# re: DOM元素如何获得焦点  回复  更多评论   

2011-12-10 07:06 by tbw淘宝商城
遇到新问题♪先要寻找一个方案乄而不是创造一个方案こ
会的。。

# re: DOM元素如何获得焦点  回复  更多评论   

2011-12-10 10:54 by tb
给元素添加 tabindex 属性

# re: DOM元素如何获得焦点  回复  更多评论   

2011-12-10 13:02 by tb
解释的很好

# re: DOM元素如何获得焦点  回复  更多评论   

2011-12-13 16:56 by tbw淘宝
学习了

只有注册用户登录后才能发表评论。


网站导航: