J2EE社區(qū)

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

          DOM元素如何獲得焦點(diǎn)

          Posted on 2011-12-09 20:07 xcp 閱讀(2932) 評論(4)  編輯  收藏 所屬分類: Javascript
          首先讓我們看看哪些元素可以直接獲得焦點(diǎn)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)一般都無法直接獲得焦點(diǎn),那如何處理呢?

          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.

          綜述,使無法直接獲得焦點(diǎn)的元素獲得焦點(diǎn)的最佳實(shí)踐就是:給元素添加tabindex = -1




          名稱: ?4C.ESL | .↗Evon
          口號: 遇到新問題?先要尋找一個(gè)方案乄而不是創(chuàng)造一個(gè)方案こ
          mail: 聯(lián)系我


          Feedback

          # re: DOM元素如何獲得焦點(diǎn)  回復(fù)  更多評論   

          2011-12-10 07:06 by tbw淘寶商城
          遇到新問題?先要尋找一個(gè)方案乄而不是創(chuàng)造一個(gè)方案こ
          會的。。

          # re: DOM元素如何獲得焦點(diǎn)  回復(fù)  更多評論   

          2011-12-10 10:54 by tb
          給元素添加 tabindex 屬性

          # re: DOM元素如何獲得焦點(diǎn)  回復(fù)  更多評論   

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

          # re: DOM元素如何獲得焦點(diǎn)  回復(fù)  更多評論   

          2011-12-13 16:56 by tbw淘寶
          學(xué)習(xí)了
          主站蜘蛛池模板: 湖南省| 灌云县| 巨鹿县| 紫阳县| 黄冈市| 农安县| 惠水县| 西安市| 如东县| 义乌市| 平阴县| 湖南省| 磐安县| 宣威市| 靖远县| 搜索| 通化市| 大名县| 兰州市| 双桥区| 滁州市| 安图县| 腾冲县| 绥芬河市| 和硕县| 衡阳县| 新巴尔虎右旗| 宣城市| 广安市| 安国市| 芦溪县| 尉犁县| 蚌埠市| 天等县| 林周县| 错那县| 桑日县| 高陵县| 和静县| 景泰县| 霍城县|