输入字段的部分密码屏蔽

IT技术 javascript html css reactjs redux-form
2021-04-09 05:18:11

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

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

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

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

理想情况下，如果有一些东西可以让输入字段有两种类型，一部分值是输入密码，其余是输入文本，那就太棒了。顺便说一句，这是用于 react js 应用程序。

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

谢谢！

3个回答

这可能有点草率，但它可以按您的需要工作，全部在一个文本字段中，返回完整准确的 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 个匹配，如果不匹配，它将更新必要的字符。

这不起作用。当我删除最后一个字符并在第 2 个数字中添加一个字符时，只有最后 3 个数字未被屏蔽。
2021-05-25 05:18:11
谢谢，对此进行了一些调整，并且在这一点上尽可能好
2021-05-31 05:18:11
我喜欢这个，但不得不改造它。文本输入拨款实际上并不包含完整值的事实意味着您必须以其他方式访问它，这对于表单提交是有问题的。此外，这是一种单一实例方法，不支持在我的情况下不够充分的众多实例。因此，我使用此代码的派生，并带有一个包含实际值的隐藏密码字段。该代码仅用于显示目的。
2021-05-31 05:18:11
是的，它可能不是最安全的选择，但它可以完成工作
2021-06-10 05:18:11
这是一个非常好的解决方案。没有意识到您可以复制密码字段。
2021-06-16 05:18:11

您可以使用 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 编写一个传递处理程序，并设置所有三个字段。

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

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

蒙面：

在此处输入图片说明

揭开面纱：

在此处输入图片说明

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

在单个字段上选择将取消屏蔽它，以便他们可以突出显示/复制/删除/粘贴数字。您还可以在第一个字段上放置一个粘贴处理程序，并从粘贴数据中解析一个有效的 SSN，如果您愿意，可以填充所有 3 个字段. 你不能同时拥有它，除非你给用户一个选项来屏蔽/取消屏蔽整个字段，就像我在我的更新中显示的那样。
2021-05-28 05:18:11
唯一的问题是当用户想要突出显示碰巧在不同字段中的数字以删除它们或他们想要粘贴数字时。
2021-06-10 05:18:11

使用 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);
    });
});
其它你可能感兴趣的问题
上一篇有没有办法在调用 React.createElement 时避免文本子项的 HTML 转义？ 下一篇错误：找不到相对于目录的预设“es2015”