输入字段上的部分密码屏蔽
Partial Password Masking on Input Field
所以我需要屏蔽 SSN# 输入字段，假设 ssn 是 123-45-6789，我需要显示 ***-**-6789（当他们输入每个数字时实时显示）但我仍然需要保留原值提交。
如果用户严格输入值，我可以做到这一点，但如果用户执行任何其他操作（例如删除或将光标移动到随机位置和 adds/deletes 一个数字，它就会中断，复制 pasting/deleting，等等。如果可能的话，我真的不想听一堆事件来完成这项工作。
我也试过让 div 位于输入字段的顶部以显示屏蔽的 ssn，而实际的 ssn 在它后面 transparent/hidden 但他们再次失去了能够 add/delete/select delete/paste 在随机部分（除了当它们从末尾开始时）并且光标与 ssn 号码的末尾不完全同步（星号大小是问题所在）。这也破坏了一些移动浏览器。
我还想过有两个单独的输入字段，一种类型的密码和一种类型的文本彼此紧挨着放置，但再次突出显示和两者之间的 deleting/pasting 将是一个问题。
理想情况下，如果有什么东西可以让输入字段有两种类型，部分值是密码类型，其余是文本类型，那就太棒了。顺便说一句，这是用于 React js 应用程序的。
TLDR：需要一个功能齐全的输入字段，它将仅对 ssn 的前 5 位数字进行密码屏蔽，而后 4 位数字为明文（同时具有可用于提交的完整明文值）。
谢谢！
您可以使用 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 编写通行证处理程序，并设置所有三个字段。
除非您使用单个完整文本框并让用户能够屏蔽和取消屏蔽该字段，否则这是最接近的。
在生产应用中，这实际上是我采用的方法：
蒙面：
揭露：
您可以实现自己的 focus/blur 功能，以根据需要自动 unmask/mask 字段。
这可能有点草率，但它可以如您所愿地工作，全部在一个文本字段中，returns 完整准确的 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 个匹配，如果不匹配，它将更新必要的字符。
Achieve this using html data attributes.
我使用了相同的 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);
});
});
所以我需要屏蔽 SSN# 输入字段，假设 ssn 是 123-45-6789，我需要显示 ***-**-6789（当他们输入每个数字时实时显示）但我仍然需要保留原值提交。
如果用户严格输入值，我可以做到这一点，但如果用户执行任何其他操作（例如删除或将光标移动到随机位置和 adds/deletes 一个数字，它就会中断，复制 pasting/deleting，等等。如果可能的话，我真的不想听一堆事件来完成这项工作。
我也试过让 div 位于输入字段的顶部以显示屏蔽的 ssn，而实际的 ssn 在它后面 transparent/hidden 但他们再次失去了能够 add/delete/select delete/paste 在随机部分（除了当它们从末尾开始时）并且光标与 ssn 号码的末尾不完全同步（星号大小是问题所在）。这也破坏了一些移动浏览器。
我还想过有两个单独的输入字段，一种类型的密码和一种类型的文本彼此紧挨着放置，但再次突出显示和两者之间的 deleting/pasting 将是一个问题。
理想情况下，如果有什么东西可以让输入字段有两种类型，部分值是密码类型，其余是文本类型，那就太棒了。顺便说一句，这是用于 React js 应用程序的。
TLDR：需要一个功能齐全的输入字段，它将仅对 ssn 的前 5 位数字进行密码屏蔽，而后 4 位数字为明文（同时具有可用于提交的完整明文值）。
谢谢！
您可以使用 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 编写通行证处理程序，并设置所有三个字段。
除非您使用单个完整文本框并让用户能够屏蔽和取消屏蔽该字段，否则这是最接近的。
在生产应用中，这实际上是我采用的方法：
蒙面：
揭露：
您可以实现自己的 focus/blur 功能，以根据需要自动 unmask/mask 字段。
这可能有点草率，但它可以如您所愿地工作，全部在一个文本字段中，returns 完整准确的 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 个匹配，如果不匹配，它将更新必要的字符。
Achieve this using html data attributes.
我使用了相同的 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);
});
});