javascript - ユーザーが番号を入力しているときにクレジットカード番号を星 (*) として表示する方法は?

Question

ユーザーがクレジットカードフィールドに入力したときに、数字として表示したい最後の4桁を除いて、すべての入力を星として表示したいと考えています。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

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 3

これを動的に実行させることができます。

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

Answer 4

最も単純な実装は、<input type =password>and で開始し、入力が行われている間に、非表示の に値を書き込み、<input type=text>ユーザーが値の入力を完了すると、最後の 4 文字を除くすべての文字を *s に変更し、そのボックスを表示して非表示にしますパスワードボックス。