tabindex 属性的妙用

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

<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" id="j_idt19:j_idt33" style="width: 92px;"> <div class="ui-helper-hidden-accessible"> <select name="j_idt19:j_idt33_input" id="j_idt19:j_idt33_input"> <option value="">Select One</option> <option value="10">Messi</option> <option value="9">Bojan</option> <option value="8">Iniesta</option> <option value="7">Villa</option> <option value="6">Xavi</option> <option value="5">Puyol</option> <option value="20">Afellay</option> <option value="22">Abidal</option> <option value="2">Alves</option> <option value="3">Pique</option> <option value="15">Keita</option> <option value="21">Adriano</option> <option value="1">Valdes</option> </select> </div> <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" id="j_idt19:j_idt33_label" style="width: 76px;">Select One</label> <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"> <span class="ui-icon ui-icon-triangle-1-s"></span></div> </div>

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

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

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

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

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

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

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

Bill 2012-8-24

© 2022, Bill X.