英文:
SSN Input Field with display only last four digits | with show/hide feature
问题
我只想显示社会安全号码的最后四位数字，其他部分用星号代替。例如：****-**-7654
我还想要一个切换星号显示/隐藏的功能，这样用户就可以看到星号后面的内容并切换它。
<input type="password" name="password" id="password" />
<i class="bi bi-eye-slash" id="togglePassword"></i>
请帮忙解决这个问题。
谢谢！
英文:
I only want to display the SSN last four digits and rest in asterisk. Like : ****-**-7654
and I want to toggle asterisk show/hide. so that user can see behind the asterisk and toggle it.
<input type="password" name="password" id="password" />
<i class="bi bi-eye-slash" id="togglePassword"></i>
please help to sort out this
Regards
答案1
得分: 1
这可能不完全符合你的要求，但它会非常接近。
这段代码利用了输入框的blur()和focus()方法。
在输入完整的社会安全号码后，点击输入框外部即可看到变化。
点击提交按钮将触发alert()，显示你输入的完整社会安全号码。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('form').on('submit', function(e){
e.preventDefault();
let socialSecurityValue = $('input[name=social]').data('value');
alert('SS: ' + socialSecurityValue);
});
$('input[name=social]').focus(function(){
let val = $(this).data('value');
if (val) {
$(this).val(val);
}
});
$('input[name=social]').blur(function(){
$(this).data('value', $(this).val());
$(this).val( $(this).val().replace(/^\d{5}/, '***-**-'));
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input class="social" type="text" name="social" maxlength="9" required>
<input type="submit" value="Submit">
</form>
<!-- end snippet -->
希望对你有帮助！
英文:
This may not work exactly how you're wanting but it will get you very close.
This code takes advantage of blur() and focus() on the input.
After typing in your full SS, click out of the input to see the changes.
Clicking submit will trigger the alert() which shows the full SS as you typed it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('form').on('submit', function(e){
e.preventDefault();
let socialSecurityValue = $('input[name=social]').data('value');
alert('SS: ' + socialSecurityValue);
});
$('input[name=social]').focus(function(){
let val = $(this).data('value');
if (val) {
$(this).val(val);
}
});
$('input[name=social]').blur(function(){
$(this).data('value', $(this).val());
$(this).val( $(this).val().replace(/^\d{5}/, '***-**-'));
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input class="social" type="text" name="social" maxlength="9" required>
<input type="submit" value="Submit">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论