Question

我有一个网站，提示用户输入产品的序列号。

我有一个文本框，用户需要以这种格式输入序列号：

xx:xx:xx:xx:xx:xx

是否有任何组件在每两个字符后输入:？

或者我应该将文本框拆分为6个文本框？

或者你可以建议其他任何技术吗？

Answer 1

您可以尝试this jquery plugin，它实际上是一个屏蔽的编辑框，您应该能够设置模式并使输入符合它，我强烈建议您查看演示选项卡。

代码似乎很容易实现，你的代码将是：

jQuery(function($){
    $("#serial").mask("99:99:99:99:99:99",{placeholder:"_"});
});

当然，如果您的序列需要字母数字输入，请使用*代替9。

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

或者你可以使用6个输入框，我之前已经看过这个，它看起来很不错，我想这取决于个人喜好。

Answer 2

如果你发现插件会有开销，那么在jQuery中创建这样的东西会非常简单。

我模拟了一个实现，检查值（剥离冒号）是否可以被2整除，如果是，它会在值中附加一个冒号：

$(document).ready(function() {

  $('#serial').keyup(function() {
    var $this = $(this);
    if($this.val().replace(/:/g, '').length % 2 == 0) {
      if($this.val().length >= 17) return;
      $this.val($this.val() + ':');
    } 
  });

});

Working example

Answer 3

您可以为jQuery使用任何mask-plugin。 Maybe this？

jquery串行格式

3 个答案: