Javascript 当用户输入信用卡号时，如何将信用卡号显示为星号（*）？

当用户在信用卡字段中键入时，我想将所有输入显示为星号，但我想显示为数字的最后四位数字除外。我使用了jQuery掩蔽，但它并没有给我想要的结果。

最简单的实现是从一个

开始，当输入进入时，您还将值写入一个

中，然后当用户输入完值时，将除最后四个字符以外的所有字符更改为*s，并显示该框和隐藏密码框。

您可以动态执行此操作：

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);
}

window.onkeyup=功能（ev）{
val=$（“输入”）.val（）；
对于（var i=0；i您可以使用多个输入，例如：

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


$（函数（）{
$（“.card number input[type='password']”）.keyup（函数（事件）{
var len=$（this.val（）.toString（）.length；
如果（len==4）{
$（this.next（）.focus（）；
}
});
$（“.卡号输入[type='button']”）。单击（函数（）{
var数=0；
$（“.card number input”）。不是（“input[type='button']”）。每个（函数（索引，元素）{
number+=$（元素）.val（）；
});
警报（编号）；
});
});
我建议只使用两个输入字段

否则，请使用以下方法。这将在密码输入字段下方显示文本


html


​

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);  
                }
            }
        }
    }
});​

var number=$（“#信用卡”）；
变量显示=$（“#显示”）；
$（“#信用卡”）.keyup（函数（）{
if（$（“#信用卡”）.val（）.length<1）{
$（'#show'）。文本（''；
}
否则{
var a=“”；
如果（number.val（）.length我想这就是你需要的


函数creditCardMask（数字，字符=“*”）{
编号=编号。替换（/[^0-9]+//g'，）；/*确保编号正确*/
var l=数字。长度；
返回数字。子字符串（0,4）+字符。重复（l-8）+数字。子字符串（l-4，l）；
}
函数doMaskNumber（e）{
document.querySelector（“#maskedNumber”）.innerHTML=creditCardMask（document.querySelector（“#credit-card”）.value）；
}
信用卡号

制作面具
你为什么要这样做？当用户输入信用卡时，他通常有可用的卡，也就是说，观看的人可以只看物理卡……掩盖数字是令人讨厌的，人们不会期望这样做（几乎没有支付公司这样做）。除此之外，普通人仅仅看几分钟就无法记住信用卡号（不像某些密码，如“正确的马电池钉”或“123456”）。不太友好。她应该如何在提交前检查输入？在后续页面中仅显示***-1234是有意义的，但在输入页面上显示***-1234？有什么好处？你怎么知道它是否是正确的信用卡号？我从未遇到过具有此功能的网店。无论如何，应该用n解决它我想@ThiefMaster会知道：-）@RavinderSingh不是通常将信用卡号码分成4位数的段吗？这只需要你的最后一个段作为正常输入？+1-这是我在回答中建议的。我认为它适用于这种情况，也可以用于增强用户体验。注意，这可能会导致Chrome在字段中自动填充密码，从而越来越难以防止。请不要使用
，因为它会要求用户“保存”他们的密码，就像他们每次使用网站时密码都已更改一样，从而破坏网站的密码管理器。
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);  
                }
            }
        }
    }
});​