任鸟飞网站设计博客

我们经常使用 Tab 键遍历页面中的所有链接与表单元素，遍历时会根据 tabindex 的大小决定顺序，默认情况下，tabIndex根据文档加载的顺序逐步加大。但毕竟文档加载的顺序和页面元素的最终布局存在不一致性，因此，经常需要设定某些链接或表单元素的 tabIndex 属性值。

今天在浏览 善用佳软博客 的时候就发现其留言表单中input的tabIndex属性值设置不正确，善用佳软博客 使用 WordPress 平台架构，而 WordPress 留言部分的顺序一般都是按照 名字 邮件地址 网站地址 留言内容 来排序的，具体如下所示：

但有很多主题的留言部分并不是按照这个顺序来排列的，比如善用佳软博客的留言表单样式如下：

查看源代码如下：

<textarea name="comment" id="comment" cols="45" rows="8" class="commentbox" tabindex="4"></textarea><br /> 

<input type="text" name="author" id="author" value="" class="textfield" tabindex="1" />　名称/Name (* 必需)<br/> 

<input type="text" name="email" id="email" value="" class="textfield" tabindex="2" />　邮箱/Email (* 必需)<br/> 

<input type="text" name="url" id="url" value="http://" class="textfield" tabindex="3" />　链接/Link<br/> 

<p><input alt="submit" name="submit" type="submit" tabindex="5"  id="submit" value=" 提交 / submit "/></p>

请留意上面代码的tabindex值，留言内容 comment 的 tabIndex 为4，按照页面最终的布局，按tab键之后应该跳转到名称才对，但实际情况是直接跳转到 提交按钮，这显然是不符合设计本意，降低了用户体验。

解决方法：

只要把各个元素的 tabIndex 属性值按照页面最终布局逐步加大即可，比如本例，只要将 tabIndex 的值按照 4 5 6 7 8 设定即可。

总结：

事情有时候都很简单，我们也知道这边有问题，但都懒的去修改。我觉得这可能就是国人的劣根性吧，我是深有体会啊。