问题描述
我有一个允许用户输入社会保险号的表格。我希望HTML输入隐藏前5位,而只显示后4位。
例如,如果用户键入123-45-6789
,则输入将显示***-**-6789
。我正在使用Inputmask Plugin来掩盖输入,并强迫用户以设置的格式键入数字。但是,我对如何将前5位数字显示为星号却又使其余部分可见感到困惑。
这是我目前正在使用的口罩
<input type="text" class="masked-input" data-inputmask="'mask': '999-99-9999'" value="" />
这是我激活该输入的方式
(function () {
Inputmask().mask(document.querySelectorAll(".masked-input"));
});
如何使输入显示为星号“密码”(最后4位数字除外)?如果无法使用此插件,没有该插件或使用其他插件怎么办?
解决方法
我能得到的最接近的代码如下:
$(document).ready(function(){
var new_value = '';
$('body').on('keyup','#maskInput',function(event){
var curr_value = $(this).val();
if (event.which == 8) {
if(curr_value.length<1){
new_value = '';
}else{
var omitted = curr_value.slice(0,-1);
$(this).val(omitted);
}
}else{
var ch = curr_value.charAt(curr_value.length-1);
if(curr_value.length<8){
if(ch == '-'){
new_value = new_value+'-';
}else{
new_value = new_value+'*';
}
$(this).val(new_value);
}
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" id="maskInput">
</form>