Блог

У меня есть простая форма оформления заказа, работающая на CardJs, но поле ММ / ГГ не работает при вызове onblur:

Мой js-код:

     var elCard = document.getElementById("number-cc");
    var elMonth = document.getElementById("month-cc");
    var elYear = document.getElementById("year-cc");
    var elCvc = document.getElementById("cvc-cc");
    elCard.onblur = createToken;
    elMonth.onblur = createToken;
    elYear.onblur = createToken;
    elCvc.onblur = createToken;
  

Мой HTML-код:

                           <div class="card-js" data-icon-colour="#158CBA">
                           <input class="card-number form-control"
                                  name="my-custom-form-field__card-number"
                                  placeholder="Número do cartão"
                                  autocomplete="off"
                                  id="number-cc"
                                  required>
                           <input class="name" id="name-cc" name="name"
                                  placeholder="Nome impresso no cartão"
                                  required>
                           <input class="expiry-month" placeholder="MM" id="month-cc" required>
                           <input class="expiry-year" placeholder="AA" id="year-cc" required>
                           <input class="cvc" id="cvc-cc" required>

                        </div>
  

Остальные поля формы ( number-cc и cvc-cc ) работают правильно. Мне интересно, является ли ошибка причиной того, что этот ввод (ММ / ГГ) объединен только в одном поле. Когда страница загружается, она создает другую input без атрибута id, как показано ниже:

Есть идеи, как я могу достичь onblur в этом поле ММ / ГГ?

CardJs:https://github.com/CardJs/CardJs/blob/master/examples/02_customise-fields.html

Спасибо!

РЕДАКТИРОВАТЬ: я не знаю, не могу ли я получить селектор запроса, потому что есть некоторые другие классы ‘expiry’ выше input class='expiry' , как упоминалось ранее. Вот полный код, загруженный на страницу:

РЕДАКТИРОВАТЬ 2:

Публикация полного js-кода:

     PagSeguroDirectPayment.setSessionId(session_id);
    console.log(session_id);

    var elName = document.getElementById("name-cc");
    elName.onblur = createHash;

    console.log(document.querySelector('input.expiry'));
    document.querySelector('input.expiry').onblur = console.log('Hello');

    var flag;

    function createHash() {
        PagSeguroDirectPayment.onSenderHashReady(function(response){
            if(response.status == 'error') {
                console.log(response.message);
                return false;
            }
            var hash = response.senderHash; //Hash estará disponível nesta variável.
            var elToken = document.getElementById("hash");
            elToken.setAttribute("value", hash);
        });
    }

    var elCard = document.getElementById("number-cc");
    var elMonth = document.getElementById("month-cc");
    var elYear = document.getElementById("year-cc");
    var elExpiry = document.querySelector('input.expiry');
    var elCvc = document.getElementById("cvc-cc");

    elCard.onblur = createToken;
    elExpiry.onblur = createToken;
    elCvc.onblur = createToken;

    function createToken() {

        var sixDig = elCard.value.substring(0,7).replace(/s /g, '');

        PagSeguroDirectPayment.getBrand({
            cardBin: sixDig,
            success: function(response) {
             flag = response.brand.name;
            },
            error: function(response) {
              console.log(response);
            },
            complete: function(response) {
              console.log(response);
            }
        });

            console.log('Card #: '   elCard.value);
            console.log('Mês: '   elMonth.value);
            console.log('Ano: '   elYear.value);
            console.log('CVC: '   elCvc.value);
            console.log('Bandeira: '   flag);
            console.log("Expiry: "   elExpiry.value);


        PagSeguroDirectPayment.createCardToken({
            cardNumber: elCard.value.replace(/ /g,''), // Número do cartão de crédito
            brand: flag, // Bandeira do cartão
            cvv: elCvc.value, // CVV do cartão
            expirationMonth: elMonth.value, // Mês da expiração do cartão
            expirationYear: 20   elYear.value, // Ano da expiração do cartão, é necessário os 4 dígitos.

            success: function(response) {
                var token = response.card.token;
                console.log('Token do cartão: '   token);
                var elToken = document.getElementById("token");
                elToken.setAttribute("value", token);
            },
            error: function(response) {
                console.log(response);
                // Callback para chamadas que falharam.
            },
            complete: function(response) {
                console.log(response);
                // Callback para todas chamadas.
            }
        });
    }
  

Обратите внимание, что ввод#month-cc и ввод #year-cc имеют type="hidden" значение, поэтому они не видны в браузере.

То, что вы на самом деле хотите настроить для onblur, это:

 const expiry = document.querySelector('input.expiry')
expiry.onblur = createToken
  

Редактировать:

Если есть другие элементы, на которые можно настроить таргетинг input.expiry , тогда вам нужно быть более конкретным, чтобы убедиться, что вы нацелены на правильный.

Вы можете попробовать: document.querySelector('.expiry-container .expiry-wrapper div input.expiry')

Если это все еще не работает, вы можете использовать document.querySelectorAll и выяснить, какой индекс является вашим целевым вводом, и добавить к нему прослушиватель событий onblur