26

我有一张信用卡号码表格。数字分为四个部分，就像在真正的信用卡上一样。

我想在表单中添加一种 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>
4

8 回答 8

30

我以前没有使用过这个工具，但它可以满足您的需求。你可以看看它的来源以获得一些想法：

GitHub 上的这个插件

对于您的情况，您将添加以下代码：

<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>
于 2009-12-24T19:03:23.923 回答
17

正如其他人所敦促的那样，不要这样做。用户无法预料到您会自动添加标签，这会让他们发疯。您是否考虑过复制和粘贴信用卡的用户？无论如何使用四个字段有什么好处？

此外，并非所有信用卡都将其号码分成四组，每组四张。例如，美国运通将它们分成三组数字。在这种情况下，动态添加和删除文本字段是自找麻烦。

相反，使用您的 Javascript 自动插入它们所属的空格，推进光标，而不是焦点。数字中的第一个数字表示信用卡的类型（5 是万事达卡，4 是维萨卡，3 是美国运通卡……），因此您可以阅读此内容来决定在何处添加空格。发布时擦掉字符串中的空格。这种方法将为您和您的用户节省很多痛苦。

于 2009-12-24T20:03:43.317 回答
10

正如@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是IE9+支持的html5事件，因此您可以改用。keyup

于 2013-06-10T16:01:53.107 回答
6

我强烈推荐使用Masked Input jQuery Plugin。

您的使用将如下所示：

$("#CreditCardNumber").mask("9999-9999-9999-9999");

这样，您将获得复制粘贴和占位符支持。

于 2013-05-09T19:32:22.073 回答
6

如果您的表单字段在您的示例中是一个并排的，您可以简单地利用nextElementSibling并瞧！

function skipIfMax(element) {
  max = parseInt(element.dataset.max)
  
  
  if (element.value.length >= max && element.nextElementSibling) {
    element.nextElementSibling.focus();  
  }
}
<input type="text" data-max=2 oninput="skipIfMax(this)"/>
<input type="text" data-max=3 oninput="skipIfMax(this)"/>
<input type="text" data-max=4 oninput="skipIfMax(this)"/>
<input type="text" data-max=5 oninput="skipIfMax(this)"/>

于 2016-10-24T15:00:16.390 回答
1

一个非常简单的解决方案可能是这样的：

<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>
于 2009-12-24T19:10:39.430 回答
0

我还没有测试过，但我认为这会奏效。当第 4 个字段完成时，它可能还会将焦点移到按钮上。

$("form input").change(function () {
    var maxLength = $(this).attr('maxlength');

    if($(this).val().length == maxLength) {
        $(this).next().focus();
    }
}
于 2009-12-24T19:06:10.733 回答
0

这没有四个字段，但它确实验证信用卡（完整性检查，而不是 Luhn 算法！）。我必须告诉你为一个用户使用多个字段和自动标签是多么烦人。我建议您只使用一个字段。

来自jquery 网站：

$("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});

/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="myform">
  <label for="field">Required, creditcard (try 446-667-651): </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
于 2009-12-24T19:08:30.467 回答