将输入中的数字屏蔽为特殊字符 (*)答案

【问题标题】：masking numbers to a special character (*) in input将输入中的数字屏蔽为特殊字符 (*)
【发布时间】：2016-09-23 07:36:00
【问题描述】：

我试图将 SSN 字段中的所有数字屏蔽为 *，同时让用户只输入数值并用破折号格式化 SSN。

这是一个小提琴链接：

https://jsfiddle.net/7f8p83am/

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    var sizes = [3, 2, 4];
    var maxSize = 10;

    for (var i in sizes) {
      if (val.length > sizes[i]) {
        newVal += val.substr(0, sizes[i]) + '-';
        val = val.substr(sizes[i]);
      } else { 
        break; 
      }       
    }

    newVal += val;
    this.value = newVal;  
});

显然，替换正在摆脱 *.关于如何做到这一点的任何想法？

提前致谢。

【问题讨论】：

您是否有某个变量仍然包含未屏蔽的数字？否则，如果您在输入时将其屏蔽，则无法在提交期间检索该值。
@4castle 这回来踢我的头。你有什么建议吗？

标签： jquery masking

【解决方案1】：

您可以考虑在输入时删除所有非数字和星号，并用星号替换数字：

// Remove all non-digits/asterisks and replace digits with asterisks
var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g,'*');

此外，您可能还想尝试在您的元素上添加 maxlength 属性以防止它继续：

<input id='ssn' maxlength='11'/>

最后，您可能需要考虑存储一个隐藏字段或变量来存储您的正确 SSN 值，以便您可以按预期将其发布到服务器。

示例

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input id='ssn' maxlength='11' />
  <script>
    $(function() {
      $('#ssn').keyup(function() {
        var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g, '*');
        var newVal = '';
        var sizes = [3, 2, 4];
        var maxSize = 10;

        for (var i in sizes) {
          if (val.length > sizes[i]) {
            newVal += val.substr(0, sizes[i]) + '-';
            val = val.substr(sizes[i]);
          } else {
            break;
          }
        }

        newVal += val;
        this.value = newVal;
      });
    });
  </script>
</body>

</html>

【讨论】：

这太棒了！感谢您的宝贵时间！
@Rion Williams，感谢您的回答，但我有一个问题实际上，我正在做一些 RND，我输入了 type="text" 而不是密码。我想实现同样的事情（意味着将数字替换为*），但用户可以在文本框中更改任何*形式的任何位置我想将原始值保留到隐藏的文本框，最后将 ie 12341 not ***** 发送到服务器意味着相同的实现输入类型密码如果有相同的 jsFiddel 链接或 plunker。
@AnkitPandey 我在使用 vuejs 时遇到了同样的问题。根本无法获得价值。有什么办法吗？