Javascript 当输入文本字段达到最大长度时移动焦点
我有信用卡号码表。这个数字分为四个部分，就像真实的信用卡一样 我想给表单添加一个JavaScript味道，当用户在一个字段中键入四个字母时，焦点自动转到下一个标记。但不是在最后一个标签中。通过这样做，用户不必键入“tab”键来移动焦点 可以在标记中添加一些额外的类、id或名称Javascript 当输入文本字段达到最大长度时移动焦点,javascript,jquery,jquery-events,usability,Javascript,Jquery,Jquery Events,Usability,我有信用卡号码表。这个数字分为四个部分，就像真实的信用卡一样 我想给表单添加一个JavaScript味道，当用户在一个字段中键入四个字母时，焦点自动转到下一个标记。但不是在最后一个标签中。通过这样做，用户不必键入“tab”键来移动焦点 可以在标记中添加一些额外的类、id或名称 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> &l
<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>
移动焦点
$（函数（）{
//这里有一些代码。
});
-
-
-
<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#first').autotab({ target: '#second', format: 'numeric' });
$('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
$('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>
$（文档）.ready（函数（）{
$（'#first'）.autotab（{target:'#second'，格式：'numeric'}）；
$（'#second'）.autotab（{target:'#third'，format:'numeric'，previous:'#first'}）；
$（'third'）.autotab（{previous:'second'，格式：'numeric'}）；
});
$("form input").change(function () {
var maxLength = $(this).attr('maxlength');
if($(this).val().length == maxLength) {
$(this).next().focus();
}
}
这没有四个字段，但它确实验证了信用卡（完整性检查，而不是Luhn算法！）。我必须告诉你，对一个用户使用多个字段并自动切换是多么烦人。我建议您只使用一个字段 从 /
jQuery.validator.setDefaults({
是的，
成功：“有效”
});;
$（文档）.ready（函数（）{
$（“#myform”）。验证({
规则：{
字段：{
要求：正确，
信用卡：对
}
}
});
});
#字段{margin left:.5em；float:left；}
#字段，标签{float:left；字体系列：Arial，Helvetica，无衬线；字体大小：small；}
br{clear:两者；}
输入{边框：1px纯黑色；边距底部：.5em；}
input.error{边框：1px实心红色；}
标签错误{
背景：url（'http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif")不重复;；
左侧填充：16px；
左边缘：.3em；
}
label.valid{
背景：url（'http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif")不重复;；
显示：块；
宽度：16px；
高度：16px；
}
必填项，信用卡（请拨打446-667-651）：
<script type="text/javascript">
function input_onchange(me){
if (me.value.length != me.maxlength){
return;
}
var i;
var elements = me.form.elements;
for (i=0, numElements=elements.length; i<numElements; i++) {
if (elements[i]==me){
break;
}
}
elements[i+1].focus();
}
</script>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="second" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="third" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<p><input type="submit" value="Send Credit Card"></p>
</form>
$("#CreditCardNumber").mask("9999-9999-9999-9999");
函数输入更改（me）{
if（me.value.length！=me.maxlength）{
返回；
}
var i；
var elements=me.form.elements；
对于（i=0，numElements=elements.length；i，正如其他人所敦促的那样，不要这样做。用户无法预期您将自动为他们添加标签，这会让他们发疯。您是否考虑过复制和粘贴信用卡的用户？使用四个字段的好处是什么
此外，并非所有的信用卡都将其号码分成四组四个。例如，美国运通将其分成三组号码。在这种情况下，动态添加和删除文本字段会带来麻烦
相反，使用Javascript自动插入空格，移动光标，而不是焦点。数字中的第一位数字表示信用卡的类型（5为万事达卡，4为Visa卡，3为美国运通卡…），因此您可以阅读此内容来决定在何处添加空格。在发布时将空格从字符串中清除。这种方法将为您和您的用户省去很多痛苦。我强烈建议使用
您的用法如下所示：
<script type="text/javascript">
function input_onchange(me){
if (me.value.length != me.maxlength){
return;
}
var i;
var elements = me.form.elements;
for (i=0, numElements=elements.length; i<numElements; i++) {
if (elements[i]==me){
break;
}
}
elements[i+1].focus();
}
</script>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="second" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="third" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<p><input type="submit" value="Send Credit Card"></p>
</form>
$("#CreditCardNumber").mask("9999-9999-9999-9999");
通过这种方式，您将获得复制粘贴和占位符支持。正如@Sander所建议的，执行自动选项卡的简单方法是：
jQuery("form input[type=text]").on('input',function () {
if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
jQuery(this).next("input").focus();
}
});
更新@morespace54
oninput
是一个html5事件，在IE9+上受支持，因此您可以使用keyup
。如果您的表单字段与示例中的表单字段是一个接一个的，您可以简单地利用nextementsibling
然后瞧
函数skipIfMax（元素）{
max=parseInt（element.dataset.max）
if（element.value.length>=max&&element.nextElementSibling）{
element.nextElementSibling.focus（）；
}
}
…当然，有些用户会按tab键，漏掉字段。不要将字段拆分，只使用一个字段。这会让用户更轻松（其他网站都是这样做的）.并不是说我是每个用户，但我讨厌使用电话、CC和SS号码的网站。我更喜欢将下一次按键理解为进入下一个框并键入的网站。在您的情况下，等待第五次按键，如果是数字，请将焦点移到下一个框，并将第一个字符设置为按下的数字。如果是右箭头键，移动到下一个框，不要设置任何字符。这是我对可用性的看法。哦，如果用户在任何给定框中输入最后一个字符时出错，他们可能希望他们的退格键继续工作。需要联合起来反对自动对焦和制表。有些UI太智能，妨碍了n正常使用代码似乎不太好。我需要在填充4个字母后单击某个位置来移动焦点。但是谢谢。我有了这个想法。啊，那是因为只有当焦点移动时才会调用更改，这在这个例子中有点蹩脚：-）。\，你可能需要挂接keyup事件。谢谢。我在我的浏览器上尝试过（Firefox和Safari），但它似乎不起作用。我改变了我。value.length！=this.maxlength对我来说。value.length！=this.maxlength为了让代码正常工作，我想这有点错误。谢谢你给我介绍了一个很棒的插件。其他人建议使用“onchange（）”，但它似乎不太好用。你提到的脚本使用