输入字段部分密码掩码

Question

所以我需要掩码一个SSN＃输入字段，可以说，ssn是123-45-6789，我需要显示***-**-6789（实时输入每个数字），但我仍然需要保留原始值提交。

如果用户严格输入值，但用户可以执行其他任何操作（如删除或将光标移动到随机位置并添加/删除数字，粘贴复制粘贴/删除等。我真的不想听一堆事件来做这个工作，如果那甚至可能的话。

我也试过让div坐在输入字段的顶部来显示被屏蔽的ssn，而实际的ssn是透明/隐藏在它后面的，但是他们又失去了能够添加/删除/选择删除/粘贴的功能在随机部分（其他时候，当他们开始在结束时），而且光标不完全与ssn号码的末尾同步（星号大小是问题）。这在一些移动浏览器上也出现了。

我还以为有两个独立的输入域，一种类型的密码，一个类型的文本坐在旁边给对方，但再次凸显和删除/两者之间粘贴将是一个问题。

理想的情况下，如果有东西在那里有一个输入字段有两种类型，值的一部分是输入密码，剩下的是类型的文本，那将是非常美妙的。顺便说一句，这是为了反应js应用程序。

TLDR：需要一个功能齐全的输入字段将做SSN的仅前5个位数密码屏蔽，并明文的最后4位数字（同时具有可提交完整的明文值）。

谢谢！

Answer 1

这可能有点草率，但它可以按照您的需要运行，全部在一个文本字段中，返回完整精确的SSN（尽管用项目符号替换前5个值），并允许在领域。

<input type="password" id="ssn" maxlength=9 /> 
 

 
<script> 
 
    var ssn = document.getElementById('ssn'); 
 
    ssn.addEventListener('input', ssnMask, false); 
 
    var ssnFirstFive = ""; 
 
    var secondHalf = ""; 
 
    var fullSSN = ""; 
 

 
    function ssnMask(){ 
 
     if (ssn.value.length <= 5){ 
 
      ssn.type = 'password'; 
 
     } 
 
     else{ 
 
      detectChanges(); 
 
      secondHalf = ssn.value.substring(5); 
 
      ssn.type = 'text'; 
 
      ssn.value = "•••••"; 
 
      ssn.value += secondHalf; 
 
      fullSSN = ssnFirstFive + secondHalf; 
 
     } 
 
    } 
 

 
    function detectChanges() { 
 
     for (var i = 0; i < 5; i++){ 
 
      if (ssn.value[i] != "•"){ 
 
       ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1); 
 
      } 
 
     } 
 
    } 
 
</script>

从本质上讲，每次输入改变时，它会检查，看它是否从之前的前5相匹配，如果没有，它会更新必要的字符。

Answer 2

您可以使用3个不同的字段，然后设置密码字段。

添加一个将其类型更改为文本的焦点处理程序以及将其更改回密码的模糊处理程序。

您可以在提交之前或在服务器上合并它们。

#ssn1{width:25px;} 
 
#ssn2{width:20px;} 
 
#ssn3{width:35px;}

<input type="password" name="ssn" maxlength=3 id="ssn1" /> 
 
<input type="password" name="ssn" maxlength=2 id="ssn2"/> 
 
<input type="password" name="ssn" maxlength=4 id="ssn3"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $('[name="ssn"]').focus(function() { 
 
    $(this).attr("type", "text") 
 
    }); 
 
    $('[name="ssn"]').blur(function() { 
 
    $(this).attr("type", "password") 
 
    }); 
 
</script>

你也可以写一通处理器的所有全SSN在第一场被粘贴，并有三个字段置位。

这是你要去，除非你有一个完整的文本框工作，并给用户，以掩盖和揭露领域的能力最接近的。

在生产中的应用程序，这其实这种方法我取：

幪面：

暴露无遗：

你可以实现你自己的焦点/模糊函数根据需要自动取消屏蔽/屏蔽字段。