Question

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

Answer 1

您可以使用多个输入，例如：

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

Answer 2

最简单的实现将从<input type =password>开始，当输入进入时，您还将值写入隐藏的<input type=text>，然后当用户输入值时更改所有字符除了最后四到*并显示该框并隐藏密码框。

Answer 3

我建议只使用2个输入字段。

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

http://jsfiddle.net/Doinkmeister/EYgqY/9/

HTML

<input id="creditCard" type="password">

<div id="show"></div>

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

Answer 4

我认为这就是你需要的东西

＆＃13;

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

＆＃13;

Credit card number<input type="text" id="credit-card" value="1111111111">
<p id="maskedNumber"></p>
<button type="button" onclick="doMaskNumber()">Make the mask</button>

＆＃13;

Answer 5

您可以动态完成此操作：

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

如何在用户输入号码时将信用卡号显示为星号（*）？

5 个答案: