如何在使用 jQuery 屏蔽输入时保留后缀

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]/}
           }});

这在一定程度上奏效了，但是当用户到达固定后缀部分时，(he/she) 将不得不实际键入后缀“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 屏蔽输入时保留后缀

How to keep a suffix while masking a input using jQuery

javascript

jquery

jquery-inputmask