0

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

4

5 回答 5

2

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

<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>
于 2012-10-24T07:31:11.927 回答
0

我建议只使用 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);  
                }
            }
        }
    }
});​
于 2012-10-24T08:16:13.433 回答
0

我认为这就是你需要的

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>

于 2017-10-19T14:57:20.657 回答
-1

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

于 2012-10-24T07:07:31.020 回答
-1

你可以让它动态完成：

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);
}
于 2012-10-24T07:08:59.497 回答