我们经常使用 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 设定即可。
总结:
事情有时候都很简单,我们也知道这边有问题,但都懒的去修改。我觉得这可能就是国人的劣根性吧,我是深有体会啊。
多谢指教,修正了tabindex的顺序,终于解决了困扰多时的tab跳转问题
非常感谢指正。tabindex已改正。
原主题是正确的,我调整了各元素的显示顺序后,忘记修改 tabindex 而导致错误。
现在想来,符合多数人习惯更重要,于是改回了原来的显示顺序。
再次致谢,真诚欢迎多多指正。
了解一些细节很有用