tabindex属性的妙用

阅读更多

大家都知道HTML中，有些元素是可以获取焦点的，尤其在表单中，碰上一些BT的客户需求，提出要用键盘走天下。如果你只用原生组件，那么，OK，过关。如果你在项目中使用了人造组件（比如Primefaces）呢？ 那么恭喜你？，屌丝，你就哭泣吧。Primefaces的很多组件的交互全靠鼠标，离开鼠标都瞎火。为什么呢？ 看一个例子,

  

            

                Select One
                Messi
                Bojan
                Iniesta
                Villa
                Xavi
                Puyol
                Afellay
                Abidal
                Alves
                Pique
                Keita
                Adriano
                Valdes
            
            Select One

            

        

啧啧，真不敢相信，这货真实的身份居然是一个相貌堂堂的DropDown list,怎么样？ 这货遇上键盘导航是不是马上就瞎了 哈哈。

之前解决方法一直比较“自然”，既然要键盘导航，组件本身就要能接受焦点，能接受焦点的标签想来想去，合适的也只有A了，于是乎，三下五除二就把最外层的div换成了a,一顿折腾，总算能用了。

事后细想, 这里有两个问题，一个就是从div换成a之后，将面临a是交互元素的问题，需要屏蔽其本来的行为，十分不自然。二来，从文档的语义上说，a是一个锚点，不是链接就是定位，挪作他用，总是不踏实的。就这样，此事成了心头一块大石，闲下来的时候，总是盼望来个大救星，“咣当”一下把我这胸口的大石给碎了。

今天偶然在翻书的时候，看到一段文字，顿时让我眼前一亮，真实神来之笔啊！ 艹，大石终于碎了，不过这救星是俺自己。

这个像极了算命，说破了一文不值。

书上大概这么说的， 说默认的情况下，只有链接和表单元素可以获得焦点，但是，如果对其他元素加上tableindex属性之后呢，也能让该元素获得焦点，甚至于用脚本执行.focus()时也有同样的效果。

读了这一段，亮瞎了，扔下书，旋即测试，果然果然，杠杠滴！甚至能兼容 Chrome16/FF14/IE9(鄙视浏览器版本帝)。所以说书中自有颜如玉啊 哈哈哈哈

Bill haibxz#gmail.com
2012-8-24