大家都知道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