如何使HTML输入显示为星号"like a password input"除了最后4位数字？

Question

我有一个表单，允许用户键入社会安全号码。我希望HTML输入隐藏前5位数字，同时只显示最后4位数字。

例如，如果用户键入123-45-6789，则输入将显示***-**-6789。我使用Inputmask插件来屏蔽输入，并强制用户以设置的格式键入数字。然而，我对如何将前5位数字显示为星号，同时使其余数字可见感到困惑。

这是我目前使用的口罩

<input type="text" class="masked-input" data-inputmask="'mask': '999-99-9999'" value="" />

以下是我如何激活输入

(function () {
Inputmask().mask(document.querySelectorAll(".masked-input"));
});

如何使输入显示为星号"；密码"；除了最后4位？如果不可能使用这个插件，没有这个插件或使用其他插件我该怎么做？

Answer 1

我能得到的最接近的是下面的代码：

$(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>