当输入文本字段达到最大长度时移动焦点

IT技术 javascript jquery jquery-events usability
2021-03-06 23:09:19

我有信用卡号表格。就像真实的信用卡一样，这个数字被分成四个部分。

我想为表单添加 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>
6个回答

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

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>
感谢您向我介绍了一个很棒的插件。其他人建议使用“onchange()”，但似乎效果不佳。您提到的脚本使用keydown(),keypress()和keyup()，这似乎是一个更好的解决方案。
2021-05-10 23:09:19

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

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

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

+1 - 输入信用卡详细信息时，自动标签是最烦人的事情。特别是如果你犯了一个错误并且需要“返回”
2021-05-17 23:09:19

正如@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

只是想让大家知道，即使上面的代码在 FF/Chrome/Safari/Opera 上运行良好（感谢 @Ouadie），我也很难让它在 IE (Doh) 中运行，即使是在 v8.x 上。我也设法通过更改 keyup 的输入使其在 IE 中工作。所以它是这样的： jQuery("form input[type=text]").on('keyup',function () { if(jQuery(this).val().length == jQuery(this).attr('maxlength')) { jQuery(this).next("input").focus(); } });
2021-04-21 23:09:19
oninput是IE9+，这就是为什么它在IE8 中不起作用我会更新解决方案。谢谢 ;）
2021-05-04 23:09:19
哦，我不知道使用输入的 IE9+。谢谢。我希望有一天，我们生活在一个没有 IE 的世界中...;)
2021-05-13 23:09:19

如果您的表单字段与您的示例中的一样，您可以简单地利用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)"/>

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

您的用法如下所示：

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

通过这种方式，您将获得复制粘贴和占位符支持。

其它你可能感兴趣的问题
上一篇Javascript显示毫秒为天：小时：分钟没有秒 下一篇使用其名称/值从数组中删除项目