javascript - 输入字段上的部分密码屏蔽

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