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

Question

所以我需要屏蔽SSN#输入字段,假设ssn是123-45-6789,我需要显示***-**-6789(实时输入每个数字)但我仍然需要保留原始值才能提交.

如果用户严格输入值,但是如果用户执行任何其他操作(例如删除),或者将光标移动到随机位置并添加/删除数字,复制粘贴/删除等,我就能做到这一点如果可能的话,我真的不想听一堆事件来使这个工作.

我还尝试在输入字段顶部设置一个div来显示被屏蔽的ssn,而实际的ssn是透明/隐藏在它后面但又失去了能够添加/删除/选择删除/粘贴随机部分的功能(另外当它们从最后开始)并且光标也不完全与ssn数字的结尾同步(星号大小是问题).这也打破了一些移动浏览器.

我还想到有两个单独的输入字段,一个类型的密码,一个类型的文本紧挨着坐在一起,但再次突出显示和删除/粘贴两者将是一个问题.

理想情况下,如果有一些东西,输入字段有两种类型,值的一部分是类型密码,其余的是类型文本,这将是太棒了.顺便说一句,这是反应js应用程序.

TLDR:需要一个功能齐全的输入字段,它只对ssn的前5位数字进行密码屏蔽,并为最后4位数字提供明文(同时提供完整的纯文本值).

谢谢!

Answer 1

这可能有点草率，但它可以按照您想要的方式工作，全部在一个文本字段中，返回完整准确的 SSN（尽管用项目符号点替换前 5 个值），并允许在字段中的任何位置进行编辑。

\n\n

\r\n

\r\n

<input type="password" id="ssn" maxlength=9 />\r\n\r\n<script>\r\n    var ssn = document.getElementById(\'ssn\');\r\n    ssn.addEventListener(\'input\', ssnMask, false);\r\n    var ssnFirstFive = "";\r\n    var secondHalf = "";\r\n    var fullSSN = "";\r\n\r\n    function ssnMask(){\r\n        if (ssn.value.length <= 5){\r\n            ssn.type = \'password\';\r\n        }\r\n        else{\r\n            detectChanges();\r\n            secondHalf = ssn.value.substring(5);\r\n            ssn.type = \'text\';\r\n            ssn.value = "\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2\xe2\x80\xa2";\r\n            ssn.value += secondHalf;\r\n            fullSSN = ssnFirstFive + secondHalf;\r\n        }\r\n    }\r\n\r\n    function detectChanges() {\r\n        for (var i = 0; i < 5; i++){\r\n            if (ssn.value[i] != "\xe2\x80\xa2"){\r\n                ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1);\r\n            }\r\n        }\r\n    }\r\n</script>

\r\n

\r\n

\r\n

\n\n

本质上，每次输入更改时，它都会检查是否与之前的前 5 个匹配，如果不匹配，它将更新必要的字符。

\n