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>

...而我正在尝试将更改功能应用于值中的第一个字符。这样的事情可能吗？

- 更新 -

根据下面的评论，我将表单修改为一个隐藏字段，其中仅包含输入的第一个数字。我现在遇到的问题是 keyup 没有触发隐藏字段的更改。将 .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 回答