用tabindex属性强化用户体验

这里我们先来区分两种填写表单的方法:
第一种,用鼠标在表单项中切换。他们会先找到需要填写的第一项,用鼠标点上去,然后右手移到键盘上(我们暂且不管你的左手放在什么地方),填写信息,接着右手移到鼠标上,点选第二项,再把右手移到键盘上,填写信息……不断重复,直到表单填写完,最后用鼠标点击“送出表单”按钮。
第二种,用Tab键切换。他们在填写表单时只在填第一项时用鼠标点选,该项填写完成后用Tab键切换至下一项,最后用回车键送出表单。整个填写过程中,双手只停留在键盘上,不用摸鼠标。
哪种方法的效率高?大家一定都有相同的答案。
使用Tab键的好处不言而喻:双手始终在同一个设备上进行操作,大大提高了填写表单效率。但是它仍然存在几个小缺陷。比如,填写时至少需要操作一次鼠标,用来选定表单的第一项。有没有办法修正这一点呢?答案就是使用tabindex属性。
tabindex属性设置按下tab键时的响应顺序。它的值是一个数字,越小的数字响应顺序越靠前,最小为1。在未设置tabindex属性时,tab键将从页面的第一个链接或者表单项开始切换(这里要说明一个情况,IE浏览器中第一次按下tab键时,选中的是地址栏)。
利用tabindex的这一特性,我们就可以给表单里的各项添加相应的属性。比如一个登录表单,第一个表单项是“用户名”,我们就可以在这一项上添加tabindex=”1”,并依次为后面的项赋值。这样,在访问这个页面时,按下tab键后光标就停在“用户名”的文本输入框上,从而完全实现了无鼠标参与的表单填写。
此外,在某些网站的注册页面,部分表单项后面会跟着一个链接或者按钮,用来对当前项的需要输入的内容进行解释或验证。在未添加tabindex属性的页面,tab键会经过这些链接或按钮。熟练的tab键用户往往会在这上面犯错误——他们以为光标已经进入下一个文本框了,可实际却停在一个链接上。最糟的情况时,他们就完全找不到光标了,从而需要重新拿起鼠标来点选下一项。使用tabindex属性就可以很好的避免这一点。为每个表单项都添加tabindex,tab键就不会进入非填写区域了。
不过我很遗憾的发现,在我访问过的网站中,没有一家使用tabindex属性。

最后,我提供一段代码供您测试tabindex属性的作用。

<form id=”form” name=”form” method=”post” action=””>
<p><a href=”www.naks.cn”>blueven.naks.cn</a> 布鲁文的蓝色奇想</p>
<p>第二项:
<label>
<input type=”text” tabindex=”2″ name=”textfield” />
</label>
</p>
<p>第一项:
<label>
<input type=”text” tabindex=”1″ name=”textfield2″ />
</label>
</p>
<p>第三项:
<label>
<input type=”text” tabindex=”3″ name=”textfield3″ />
</label>
</p>
</form>

用tabindex属性强化用户体验》有3个想法

  1. 路过的

    后续tabindex

    用户输入完比如[用户名]后自动跳转到下一个比如[密码]

    用户如果反悔上一步的话用鼠标

    PS:

    有多少用户会输入错误或者反悔自己输入的东西.

    这样什么键都不用按了….

    回复

发表回复

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