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

Posted 2023-02-22

【中文标题】如何将光标聚焦在条纹输入元素上

【英文标题】：How to focus cursor on a stripe input element

【发布时间】：2019-03-18 04:12:26

【问题描述】：

我正在尝试使用 Stripe Elements (https://stripe.com/docs/stripe-js/reference#other-methods) 添加信用卡表单。

通常我会专注于一个元素：

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

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

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

所以它正在抓取正确的项目。如何将光标聚焦在输入项上？看起来它可能在 iframe 中，即使我可以在 jquery/javascript 中为其写入值。

【问题讨论】：

可能模拟点击？

@JBDouble05 似乎它可能在 iframe 中？另外，如何模拟点击？

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

您的答案附带的一些解释会非常有帮助。代码可能很简单，但我们想知道您为什么认为这是一个解决方案。

确实我们不能直接作用于条纹输入。我们必须通过条带元素组件。stripe.com/docs/stripe-js/elements/quickstart#setup

【参考方案3】：

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

例如，您可以有一个按钮，通过这样做将焦点放在 CVC 元素（假设拆分字段）

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

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

【讨论】：

我将如何在页面加载时执行此操作？上面的重点是在加载字段后立即选择它。在上面，你实际上必须点击一些东西（为什么用户不直接点击表单输入呢？）。