1

クライアント用のクレジット カード フォームを作成していて、その人がクレジット カード番号を入力し始めたら、クレジット カード会社のロゴを表示したいと考えています。

すべての Visa は 4 から始まります。MC は 5 です。Discover は 6 です。Amex は 36、Diners は 37 です。

だから私はこのようなことを試みています：

<script>
    $(document).ready(function() {
        $($('#cardNumber').val().substring(0,1)).change(function() {
            switch ($(this).val()) {
                case '4':
                    $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '5':
                    $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '6':
                    $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
            }
        });
    });
</script>

<form name="creditCardForm" id="creditCardForm" action="" method="post">
    <fieldset>
        <label for="cardNumber">Card Number:</label>
        <span id="cardImage"></span>
        <input type="text" name="cardNumber" id="cardNumber">
    </fieldset>
</form>

...一方、値の最初の文字だけに変更関数を適用しようとしています。このようなことは可能ですか？

- アップデート -

以下のコメントに基づいて、入力された最初の数字だけを含む非表示フィールドを持つようにフォームを変更しました。私が今直面している問題は、キーアップが非表示フィールドの変更をトリガーしていないことです。隠しフィールドの最後に .change() 関数をチェーンすると、毎回画像が表示されます。ユーザーが戻って最初の数字を再度変更した場合に備えて、最初の数字が入力された後にイベントをバインド解除したくありません。

ここで進む方法について何か考えはありますか？

<script>
    $(document).ready(function() {
        $('#cardNumber').on('keyup', function() {
            $('#firstCreditCardDigit').val($(this).val().substring(0,1));
        });

        $('#firstCreditCardDigit').change(function() {
            switch ($(this).val()) {
                case '4':
                    $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '5':
                    $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
                case '6':
                    $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                    break;
            }
        });
    });
</script>

<form name="creditCardForm" id="creditCardForm" action="" method="post">
    <input type="hidden" name="firstCreditCardDigit" id="firstCreditCardDigit">
    <fieldset>
        <label for="cardNumber">Card Number:</label>
        <span id="cardImage"></span>
        <input type="text" name="cardNumber" id="cardNumber">
    </fieldset>
</form>
4

2 に答える 2

1

on("propertychange keyup input cut paste", function(ev){}代わりに次のようなものを使用します。次のようなことができます：

$('#cardNumber').on("propertychange keyup input cut paste", function (ev) {
    if ($(this).data("done") != $(this).val().substring(0, 1)) {
        switch ($(this).val().substring(0, 1)) {
            case '4':
                alert("4")
                break;
            case '5':
               alert("5")
                break;
            case '6':
                alert("6")
                break;
        }
        $(this).data("done", $(this).val().substring(0, 1))
    }
    if ($(this).val() == "") $(this).data("done", false)
});
于 2013-08-17T19:02:29.050 に答える
0

イベントは要素に適用され、内容は検証のみ可能です。このようなことを試すことができます。誰かが 4111 1111 1111 1111 と入力し、後で 4 を 5 に変更しても機能します。

    $(document).ready(function() {
            $('#cardNumber').change(function() {
                var firstDigit= $(this).val().substring(0, 1);
                switch (firstDigit) {
                    case '4':
                        $('#cardImage').hide().html('<img src="img/visa.png" alt="Visa" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '5':
                        $('#cardImage').hide().html('<img src="img/mastercard.png" alt="Mastercard" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                    case '6':
                        $('#cardImage').hide().html('<img src="img/discover.png" alt="Discover" style="width: 50px; height: 30px;">').fadeIn(250);
                        break;
                }

            });
});
于 2013-08-17T19:12:29.813 に答える