如何关注页面加载后加载的元素 [英] How to focus on element that loads after page load

问题描述

我正在使用以下hack-ish方法在加载后关注Stripe输入元素：

I am using the following hack-ish approach to focus on the Stripe input element after it's loaded:

<div id="card-element">
  <!-- Load stripe stuff here -->
</div>

// <script src="https://js.stripe.com/v3/"></script>
var card = elements.create('card', {style: style});
card.mount('#card-element');

setTimeout(function(){
    card.focus();
},1000);

有没有更好的方法，即检测卡的时间元素是'专注'。如果我在页面加载时执行它，它只是看不到该元素（它可能尚未添加，因此它不起作用）。

Is there a better way to do, i.e., to detect when the card element is 'focus-able'. If I do it on page-load, it just doesn't see the element (it probably hasn't been added yet, and so it doesn't work).

这是一个示例元素： https://stripe.github.io/elements-examples/（我无法将一个工作示例粘贴到jsfiddle中，因为我不确定如何加载外部库）。

Here's an example element: https://stripe.github.io/elements-examples/ (I wasn't able to paste a working example into jsfiddle, as I wasn't sure how to load an external library).

推荐答案

根据文档，您可以附加一个监听器元素然后在安装时调用焦点。

As per the docs you can attach a listener on the element and then call focus when it has mounted.

未测试代码但应该看起来像这样

Not tested code but should look something like this

 card.on('ready', function(){
    card.focus();
    }
)

这篇关于如何关注页面加载后加载的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！