How to focus on element that loads after page load

问题

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).

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).

回答1:

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

来源：https://stackoverflow.com/questions/52883195/how-to-focus-on-element-that-loads-after-page-load