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

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

元素需要完全初始化才能调用focus(). 使用简单的事件处理程序确保元素准备就绪：

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

Answer 2

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

例如，您可以有一个按钮，通过执行以下操作将焦点集中到 CVC 元素（假设拆分字段）

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

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