小编典典

输入字段的部分密码屏蔽

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