0元购京东自营斐讯K2路由器返399元活动
置顶

Input 标签中的 tabIndex 属性用法

作者:     目录: 小代码     发表: 2010年09月02日

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

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

Input 标签中的 tabIndex 属性用法

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

Input 标签中的 tabIndex 属性用法

查看源代码如下:

<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 设定即可。

总结:

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

标签: .

3 个评论

  1. BoKeam says:

    了解一些细节很有用

  2. 善用佳软 says:

    非常感谢指正。tabindex已改正。

    原主题是正确的,我调整了各元素的显示顺序后,忘记修改 tabindex 而导致错误。
    现在想来,符合多数人习惯更重要,于是改回了原来的显示顺序。

    再次致谢,真诚欢迎多多指正。

  3. atatstone says:

    多谢指教,修正了tabindex的顺序,终于解决了困扰多时的tab跳转问题

BoKeam进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注