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

【问题标题】：How to keep a suffix while masking a input using jQuery如何在使用 jQuery 屏蔽输入时保留后缀
【发布时间】：2018-09-19 15:43:24
【问题描述】：

我正在尝试使用 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”，这是唯一允许的，因为自定义掩码。但是，我不希望用户键入后缀，它需要在那里修复。有谁知道如何做到这一点？谢谢。

【问题讨论】：

请记住，在客户端验证上花费太多时间是一场失败的战斗。客户总是有可能绕过它们。你不需要抓住每一个边缘情况。更多地将它们视为指南。

标签： javascript jquery jquery-inputmask

【解决方案1】：

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

<input type="text" />.7.09.009

你可以用一些 css 来使它更好，你必须用 JS 或你用来处理数据的语言来添加它。所以也许是这样的：

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

可能更容易使用。

【讨论】：

感谢您的意见，我明天回去工作就可以试试了。

【解决方案2】：

你可以使用这个库来完成这个

<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/

【讨论】：

【解决方案3】：

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

【讨论】：

感谢您的意见，我明天回去工作就可以试试了。