如何在编辑屏蔽输入时获取正确的值(自定义掩码)

Question

我有两个输入(屏蔽和未屏蔽(和一个用作显示/隐藏按钮的切换按钮。它的工作方式与密码掩码类似，只是它只屏蔽字符串中的某些字符。无论我在unmasked文本框中输入什么，都会调用createMask函数，结果将显示在masked文本框中。

问题是，当显示屏蔽文本框并且我编辑值时，它应该更新未屏蔽文本框中的值。

例如，12345678->1XXXX678

然后我会1XXXX678编辑为1XXXX619

当我单击按钮取消屏蔽时，它应该显示12345619

为了更好地理解，这里是完整的代码：jsfiddle

Answer 1

您可以将实际值存储在输入元素的数据属性中，这样您就拥有了单一的事实来源。

切换时，您可以获得实际值并显示屏蔽/取消屏蔽。

此外，您还需要有一个屏蔽/取消屏蔽的状态，因此当您更新值时，您知道未屏蔽的值可以直接替换值，屏蔽值将只是第一个字母和其余字母，您必须从最后一个已知值中选择屏蔽区域

现在，当处于屏蔽状态的用户更改我给出的任何X值时，如果它是"XXXX"，如果它尝试更新该值，它将采用旧值。我保留了用户所在的光标位置。如果你想发挥创意，你可以在这里处理一个逻辑。

$(function() {
$('#SSN').on('input', function(e) {
const this$ = $(this);
const val = $(this).val();
if (this$.data('unmask')) {
this$.data('val', val);
} else {
const oldParams = getMask(this$.data('val'), false);
const newParams = getMask(val, false);
const newMaskArea = getUpdatedMaskArea(e.target.selectionStart, oldParams.maskArea, newParams.maskArea);
const newValue = newParams.first + newMaskArea + newParams.rest;
this$.data('val', newValue);
}
}).on('blur', function() {
const this$ = $(this);
this$.val(getMask(this$.data('val'), !this$.data('unmask')).value);
}).data('val', $(this).val())
$('#toggle').on('click', toggle).trigger('click');
});
function toggle() {
$(this).find('i').toggleClass('fa-eye-slash');
$('#SSN').data('unmask', !$(this).find('i').hasClass('fa-eye-slash')).trigger('blur');
}
function getUpdatedMaskArea(position, oldMask, newMask){
if(position>=2 && position<=5){
if(newMask.indexOf('X')===-1){
return newMask;// user input new value
} else if(newMask.length === oldMask.length){
return newMask.replace(/X/g, (v,i)=>oldMask.charAt(i));//user updates 'X'
} else {
//when there are less than desired X ? I am not sure how to handle this
}
}
return oldMask;
}
function getMask(val, mask) {
const first = val.substring(0, 1);
const maskArea = val.substring(1, 5);
const rest = val.substring(5, val.length);
const value = first + (mask ? maskArea.replace(/./g, 'X') : maskArea) + rest;
return {first, maskArea, rest, value};
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
<input id="SSN" maxlength="8">
<button id="toggle" type="submit">
<i class="fa fa-eye"></i>
</button>
</div>