Как навести курсор на элемент ввода полосы

Question

Я пытаюсь добавить в форму кредитной карты с Stripe Elements (https://stripe.com/docs/stripe-js/reference#other-methods).

Обычно я бы сосредоточился на элементе, выполнив:

$('input[type="tel"]').focus()

Однако это не 'не работает с вводом данных с кредитной карты Stripe. Однако работает следующее:

$('input[type="tel"]').value='asdf'

Итак, он захватывает нужный элемент. Как бы я нацелил курсор на элемент ввода? Кажется, что это может бытьвнутри iframe, хотя я могу записать в него значение в jquery / javascript.

Answer 1

 let elements = stripe.elements();    
let cardCvcElement = elements.create("cardCvc");
cardCvcElement.mount("#card-cvc-element");

    let cvc = document.querySelector("#card-cvc-element");
    cardCvcElement.addEventListener("blur", () => {
      cvc.style.removeProperty("border");
    });
    cardCvcElement.addEventListener("focus", () => {

        cvc.style.setProperty("border-color","red");
      }
    });

Answer 2

Элемент должен быть полностью инициализирован, прежде чем вы сможете вызвать focus().Убедитесь, что элемент готов с помощью простого обработчика событий:

element.on('ready', () => {
  element.focus()
})

Answer 3

Вы должны использовать focus() метод на элементе, который вы создали, а не на самом Div.

Например, вы можете иметь кнопку, которая фокусирует элемент CVC (предполагая разделение полей), выполнив

document.getElementById('give-focus').addEventListener('click', function () {
  cardCvcElement.focus();
});

Вы можете увидеть это в действии здесь: https://jsfiddle.net/4c72oyap/