所以我需要屏蔽一个SSN#输入字段,假设ssn是123-45-6789,我需要显示***-**-6789(他们输入每个数字时都是实时的),但是我仍然需要保留原始值以提交。
123-45-6789
***-**-6789
如果用户严格输入值,我可以做到这一点,但是如果用户执行其他任何操作(如删除或将光标移动到随机位置并添加/删除数字,复制粘贴/删除等),它就会中断如果可能的话,我真的不想听一堆事件来完成这项工作。
我还尝试过在输入字段的顶部放置一个div来显示被屏蔽的ssn,而实际的ssn在其后是透明/隐藏的,但是它们又失去了可以在随机部分中添加/删除/选择删除/粘贴的功能(否则,当它们从末尾开始时),并且光标也未与ssn号码的末尾完全同步(星号大小是问题)。这在某些移动浏览器上也中断了。
我还想到了两个单独的输入字段,一个类型的密码和一个类型的文本彼此相邻,但是再次突出显示和删除/粘贴这两个字段将是一个问题。
理想的情况是,如果有一个输入字段具有两种类型,其中一部分是password类型,另一部分是text类型,那就太好了。顺便说一句,这是为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个匹配,如果不匹配,它将更新必要的字符。