所以我需要屏蔽 SSN# 输入字段,假设 ssn 是 123-45-6789
,我需要显示 ***-**-6789
(他们输入每个数字时实时)但我仍然需要保留原始值才能提交。
如果用户严格输入值,我可以做到这一点,但如果用户执行任何其他操作(例如删除,或将光标移动到随机位置并添加/删除数字,复制粘贴/删除等。如果可能的话,我真的不想听一堆事件来完成这项工作。
我还尝试在输入字段顶部放置一个 div 以显示屏蔽的 ssn,而实际的 ssn 是透明的/隐藏在它后面,但它们再次失去了能够添加/删除/选择删除/粘贴的功能随机部分(除了当它们从末尾开始时)以及光标与 ssn 号码的末尾不完全同步(星号大小是问题所在)。这也在一些移动浏览器上崩溃了。
我还想过有两个单独的输入字段,一种类型的密码和一种类型的文本彼此紧挨着放置,但是在两者之间突出显示和删除/粘贴将再次成为一个问题。
理想情况下,如果有什么东西可以让输入字段有两种类型,部分值是密码类型,其余是文本类型,那就太棒了。顺便说一句,这是用于 React js 应用程序的。
TLDR:需要一个功能齐全的输入字段,它将仅对 ssn 的前 5 位数字进行密码屏蔽,而对后 4 位数字进行明文(同时具有可用于提交的完整明文值)。
谢谢!
最佳答案
这可能有点草率,但它可以如您所愿地工作,全部在一个文本字段中,返回完整准确的 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 个匹配,如果不匹配,它将更新必要的字符。
关于javascript - 输入字段上的部分密码屏蔽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45113132/