奇怪的杯子

年轻没有失败、

 

DOM元素如何获得焦点

首先让我们看看哪些元素可以直接获得焦点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

posted on 2012-01-18 09:49 奇怪的杯子 阅读(158) 评论(0)  编辑  收藏


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


网站导航:
 

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜