如何制作序列号表格?用“-"在中间分开

How to make a serial number form? with "-" split in the middle

本文关键字：quot 在中间 序列号 何制作 表格      更新时间：2023-09-26

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

XX-XX-XX-XX-xxx-XX

但我不希望用户手动键入"-"。

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

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

  2. 我可以让它用Javascript控制文本框，并让它自动选中该框并用"-"分隔代码。但想象一下，如果你有

01-02-03-09-05-06

如果你想更改"09"，如果用户删除"9"，它会出现故障，看起来像这样：

01-02-03-00-50-6

在我看来这还不够好。我想让它对用户来说是完美的。

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

有一个很棒的jquery插件可以用于这种输入：

https://github.com/digitalBush/jquery.maskedinput

代码：

首先，包括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());}});
});

等等…

只需使用本机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

相关文章：