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个不同的字段，然后输入密码字段。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以为要在第一个字段中粘贴的所有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);
    });
});

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

3 个答案:

部分掩码输入值的功能

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