输入字段的部分密码屏蔽

小编典典

输入字段的部分密码屏蔽

reactjs

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

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

我还尝试过在输入字段的顶部放置一个div来显示被屏蔽的ssn，而实际的ssn在其后是透明/隐藏的，但是它们又失去了可以在随机部分中添加/删除/选择删除/粘贴的功能（否则，当它们从末尾开始时），并且光标也未与ssn号码的末尾完全同步（星号大小是问题）。这在某些移动浏览器上也中断了。

我还想到了两个单独的输入字段，一个类型的密码和一个类型的文本彼此相邻，但是再次突出显示和删除/粘贴这两个字段将是一个问题。

理想的情况是，如果有一个输入字段具有两种类型，其中一部分是password类型，另一部分是text类型，那就太好了。顺便说一句，这是为React
js应用程序。

TLDR：需要一个功能齐全的输入字段，该字段将仅对ssn的前5位数字进行密码屏蔽，而对后4位数字采用纯文本格式（同时具有可提交的完整纯文本值）。

谢谢！

阅读 287

2020-07-22

共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个匹配，如果不匹配，它将更新必要的字符。

2020-07-22