Question

我正在尝试添加带有Stripe Elements（https://stripe.com/docs/stripe-js/reference#other-methods）的信用卡表格。

通常我会通过以下方式关注元素：

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

但是，这不适用于Stripe信用卡输入。但是，以下方法确实有效：

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

因此，它正在抓取正确的物品。如何将光标聚焦在输入项上？即使我可以在jquery / javascript中为其写入值，它似乎也可能位于iframe中。

Answer 1

在调用focus()之前，该元素需要完全初始化。使用简单的事件处理程序确保元素已准备就绪：

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

Answer 2

您应该在创建的元素上使用focus() method，而不是div本身。

例如，您可以通过执行此操作使按钮聚焦于CVC元素（假定拆分字段）

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

您可以在此处看到此操作：https://jsfiddle.net/4c72oyap/

Answer 3

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

如何将光标聚焦在条纹输入元素上

3 个答案: