输入字段的部分密码屏蔽

Question

所以我需要屏蔽一个 SSN# 输入字段，假设 ssn 是123-45-6789 ，我需要显示***-**-6789 （当他们输入每个数字时实时）但我仍然需要保留要提交的原始值。

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

我还尝试将 div 放在输入字段的顶部以显示屏蔽的 ssn，而实际的 ssn 是透明的/隐藏在它后面，但它们再次失去了能够添加/删除/选择删除/粘贴随机部分的功能（否则当它们从末尾开始时）以及光标与 ssn 编号的末尾不完全同步（星号大小是问题）。 这在一些移动浏览器上也有问题。

我还想过有两个单独的输入字段，一种类型的密码和一种类型的文本彼此相邻，但再次突出显示和删除/粘贴两者之间的问题。

理想情况下，如果输入字段有两种类型，一部分值是输入密码，其余是输入文本，那就太棒了。 顺便说一句，这是用于 react 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 编写一个传递处理程序，并设置所有三个字段。

这是您最接近的方法，除非您使用单个完整文本框并让用户能够屏蔽和取消屏蔽该字段。

在生产应用程序中，这实际上是我采用的方法：

蒙面：

揭开面纱：

您可以实现自己的焦点/模糊功能，以根据需要自动取消屏蔽/屏蔽该字段。

Answer 3

使用 html 数据属性实现这一点。

我使用了相同的 html 标签并将实际值存储在 html 标签属性（ data-value ）中以供稍后使用并将值存储在 html 标签属性value 。

部分屏蔽输入值的函数

function mask_field_value(obj, mask_letters_count=7){
  mask_value =  $(this).data('mask-value') || '';
  unmask_value = $(this).data('unmask-value') || '';
  if (obj.value.length <= mask_letters_count){
        obj.type = 'password';
        mask_value = obj.value;
        $(this).data('mask-value', obj.value);
    } else {
        obj.type = 'text';
        unmask_value = obj.value.substring(mask_letters_count);
        obj.value = "*".repeat(mask_letters_count) + unmask_value;
        $(this).data('unmask-value', unmask_value);
    }
    $(this).data('value', mask_value + unmask_value);
    console.log($(this).data('value'));
}

在输入字段上添加事件以屏蔽

$(document).ready(function () {
    $(document).on('keyup', '.mask_input_display', function () {
         mask_field_value(this);
    });
});