javascript 如何在用户输入号码时将信用卡号码显示为星号 (*)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13044313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show credit card number as star (*) while user is inputting the number?
提问by Ravinder Singh
I want to show all the input as stars when the user types in the credit card field except the last four digits which I want to show as numbers. I used jQuery masking but it is not giving me desired result.
当用户在信用卡字段中键入时，除了我想显示为数字的最后四位数字外，我想将所有输入显示为星号。我使用了 jQuery 掩码，但它没有给我想要的结果。
回答by testCoder
you can use multiple inputs, for example:
您可以使用多个输入，例如：
<script type="text/javascript">
$(function () {
$(".card-number input[type='password']").keyup(function (event) {
var len = $(this).val().toString().length;
if (len == 4) {
$(this).next().focus();
}
});
$(".card-number input[type='button']").click(function () {
var number = 0;
$(".card-number input").not("input[type='button']").each(function (index, element) {
number += $(element).val();
});
alert(number);
});
});
</script>
<!-- ####-####-####-#### -->
<div class="card-number" >
<input type="password" value="" maxlength="4" />
<input type="password" value="" maxlength="4" />
<input type="password" value="" maxlength="4" />
<input type="text" value="" maxlength="4" />
<input type="button" value="go" />
</div>
回答by Doink
I suggest to just use 2 input fields.
我建议只使用 2 个输入字段。
Otherwise use the following method. This will display the text below the password input field.
否则使用以下方法。这将在密码输入字段下方显示文本。
http://jsfiddle.net/Doinkmeister/EYgqY/9/
http://jsfiddle.net/Doinkmeister/EYgqY/9/
html
html
<input id="creditCard" type="password">
<div id="show"></div>?
javascript
javascript
var number = $('#creditCard');
var display = $('#show');
$('#creditCard').keyup(function(){
if($('#creditCard').val().length < 1){
$('#show').text('');
}
else{
var a = '';
if(number.val().length <= 8){
for(var i = 0; i < number.val().length; i++){
a = a + '*';
display.text(a);
}
}
else
{
for(var i = 0; i < number.val().length; i++){
if(i <= 8){
a = a + '*';
display.text(a);
}
else{
a = a + number.val().substring(i,i+1);
display.text(a);
}
}
}
}
});?
回答by André Betiolo
I think that's what you need
我认为这就是你所需要的
function creditCardMask(number, character = "*"){
number = number.replace(/[^0-9]+/g, ''); /*ensureOnlyNumbers*/
var l = number.length;
return number.substring(0,4) + character.repeat(l-8) + number.substring(l-4,l);
}
function doMaskNumber(e){
document.querySelector("#maskedNumber").innerHTML = creditCardMask(document.querySelector("#credit-card").value);
}Credit card number<input type="text" id="credit-card" value="1111111111">
<p id="maskedNumber"></p>
<button type="button" onclick="doMaskNumber()">Make the mask</button>回答by awright18
The simplest implementation would start off with an <input type =password>and while input is going into that you also write the values into a <input type=text>that is hidden then when then user is done entering values change all the characters except the last four to *s and show that box and hide the password box.
最简单的实现将从一个开始<input type =password>，当输入进入时，您还将值写入<input type=text>隐藏的值，然后当用户完成输入值时，将除最后四个字符以外的所有字符更改为 *s 并显示该框并隐藏密码框。
回答by tobspr
You could let this done dynamically:
你可以让这动态完成：
window.onkeyup = function(ev) {
val = $("the-input").val();
for(var i = 0;i<min(digits_to_not_show,val.length-1);i++) {
val = val.substring(0,i)+"*"+val.substr(i+1);
}
$("the-input").val(val);
}
