4

我想在 HTML 上制作一个表单，供用户提交序列码。它看起来像这样：

XX-XX-XX-XX-XX-XX

但我不希望用户手动输入“-”。

我有两种可能的解决方案。

  1. 我的第一个计划是为每个部分制作多个 < input >，并添加一个选项卡索引，但这对于手机用户来说仍然太难了，因为 Android 没有类似 TAB 的功能来滚动浏览 6 个 < input >。这意味着他们将不得不处理点击超小的输入框并体验上下弹出的故障键盘。

  2. 我可以使文本框由 Javascript 控制，并使其选中该框并自动使用“-”拆分代码。但想象一下，如果你有

01-02-03-09-05-06

并且您想更改“09”，如果用户删除“9”，它将出现故障，如下所示：

01-02-03-00-50-6

我认为这还不够好。我想让它对用户完美。

那么专业人士是如何做到的呢？方案1中的光标是否可以自动从一个<输入>跳转到下一个？

4

2 回答 2

3

这种输入有一个很棒的 jquery 插件：

http://digitalbush.com/projects/masked-input-plugin/

代码：

首先，包括 jQuery 和屏蔽的输入 javascript 文件。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

接下来，为您希望屏蔽的那些项目调用屏蔽函数。

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

可选地，如果您对作为占位符的下划线 ('_') 字符不满意，则可以将可选参数传递给 maskedinput 方法。

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

或者，如果您想在完成掩码后执行一个函数，您可以将该函数指定为 maskedinput 方法的可选参数。

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

等等...

于 2013-08-08T08:09:16.793 回答
2

只需使用本机 JavaScript。你不需要 jQuery 来做这么简单的事情。

您需要做的是检查输入字符串的长度。如果这是 2, 5, 8, 11, ...，则自动添加破折号。下一个条件将返回true这些值：value.length % 3 == 2。您应该在keydown事件中检查这一点，因为它会在用户输入内容后触发。

document.getElementById('serial').addEventListener('keydown', function (e) {
    var value = this.value;

    // 17 is the max length of the serial XX-XX-XX-XX-XX-XX-XX
    if (value.length < 17) {
        if (value.length % 3 == 2 && value.substr(value.length - 1, 1) !== '-') {
            this.value = this.value + '-';
        }
    }
}, false);

FIDDLE

于 2013-08-08T08:20:15.423 回答