【发布时间】：2010-12-29 21:15:38
【问题描述】：
我有一张信用卡号码表。该号码与真实信用卡一样分为四部分。
我想在表单中添加一种 JavaScript 风格，当用户在一个字段中键入四个字母时，焦点会自动转到下一个标签。但不在最后一个标签中。通过这样做，用户不必键入“tab”键来移动焦点。
可以在标签中添加一些额外的类、id 或名称。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MoveFocus</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
// some code goes here.
});
</script>
</head>
<body>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"/> -
<input type="text" value="" id="second" size="4" maxlength="4"/> -
<input type="text" value="" id="third" size="4" maxlength="4"/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"/>
<p><input type="submit" value="Send Credit Card"></p>
</form>
</body>
</html>
【问题讨论】：
-
...当然，有些用户会按 Tab 键，然后错过字段。不要划分字段，只需使用单个字段。它使用户的事情变得更容易（这是所有其他网站所做的）。
-
并不是说我是每个用户，但我讨厌使用电话、CC 和 SS 号码这样做的网站。我更喜欢将下一个按键解释为进入下一个框并输入它的网站。在您的情况下，等待第五次按键，如果是数字，请将焦点移到下一个框并将第一个字符设置为按下的数字。如果是右箭头键，移动到下一个框，不要设置任何字符。只是我对可用性的看法。
-
哦，如果用户在输入任何给定框中的最后一个字符时出错，他们可能希望退格键继续工作。
-
需要一个反对自动对焦和 Tabbing 的联盟......这些 UI 太智能了，妨碍了正常使用
标签： javascript jquery jquery-events usability