Question

我正在尝试使用jQuery使用以下掩码“ ########-##。####。7.09.009”对用户输入进行掩码，因此当用户开始输入时，像这样：

1 ______-__.____。7.09.009（用户键入1）

12 _____-__.____。7.09.009（用户键入2）

123 ____-__.____。7.09.009（用户键入3）

依次类推，直到达到“ 7.09.009”部分为止。

用户应该无法编辑该部件，就像那里的固定占位符一样。我尝试使用Jasny's input mask取得了一些成功，但是由于数字被0掩盖并且固定后缀为0，因此它允许用户键入固定部分中零的位置。我没有找到将数字占位符从0替换为其他值的方法，因为我想那可以解决我的问题。

然后，我发现了另一个jQuery mask plugin，它允许我使用＃屏蔽数字，但是由于它也将0识别为数字的占位符，因此最终无法正常工作。我还尝试过像这样创建自定义蒙版：

 $("#numero-processo").mask('0000000-00.0000.A.BC.BBC',
          {placeholder: "_______-__.____.7.09.009",
          'translation': {
               A: {pattern: /[7]/},
               B: {pattern: /[0]/},
               C: {pattern: /[9]/}
           }});

在某种程度上可以奏效，但是当用户到达固定的后缀部分时，（他/她）将必须实际键入后缀“ 7.09.009”，这是唯一会被允许的原因，因为自定义蒙版。但是，我不希望用户键入后缀，因此需要将其固定在那里。有谁知道如何做到这一点？谢谢。

Answer 1

通常可以通过将固定部分放在输入之外来解决此问题（如果用户不应该对其进行修改，如果实际上不在可变部分中，则更符合人体工程学）。

<input type="text" />.7.09.009

您可以使用一些CSS使它更好，并且必须使用JS或用于处理数据的语言来添加它。所以也许像这样：

<div class="mask_field" addendum=".7.09.009"><input type="text" />.7.09.009</div>

使用起来会更容易。

Answer 2

$("#numero-processo").keyup(function(){
    var input = $(this).val();
    if(input.length == 15) {
        input += ".7.09.009";
        $(this).val(input);
    }
});

Answer 3

您可以使用此库完成此操作

<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>

您的JavaScript将是：

<input id="numero-processo" placeholder="_______-__.____.7.09.009" />

<script>
  $(document).ready(function(){
     $("#numero-processo").inputmask("9999999-99.9999.7.0\\9.00\\9");
  });
</script>

这是一个jsfiddle：https://jsfiddle.net/3kyau2p8/

如何在使用jQuery掩盖输入时保留后缀

3 个答案: