Question

使用Vue.js并在Vue主元素中包含条纹卡元素时，tabindex无法正常工作。检查以下代码：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
    <input type="text" placeholder="first tab element on page"><br />
    <br />
    <div id="stripeDiv">
        <div id="card-element" style="border: 1px solid black;max-width:300px">
            <!-- A Stripe Element will be inserted here. -->
        </div>
        <div id="card-errors" role="alert"></div>
    </div>    
    <br />
    <input type="text" placeholder="tab element after stripe form"><br />
    <script>
        var stripe = Stripe("somestripepublickey");
        var card = stripe.elements().create('card').mount('#card-element');

        var vue_test = new Vue({
            el: '#stripeDiv'
        });
    </script>
</body>
</html>

当您对其进行制表时，您将在离开条带字段之后立即进入顶部输入框。您应该最终进入底部的输入框。当我删除Vue东西时，它就可以工作。

我知道我可以在onfocus上使用一些js，但我宁愿不要。

PS：不需要条纹帐户即可对此进行测试。

Answer 1

您只需要更改Javascript的顺序即可。安装卡元素会对dom产生很多疯狂的作用。

var stripe = Stripe("somestripepublickey");
var vue_test = new Vue({
  el: '#stripeDiv'
});
var card = stripe.elements().create('card').mount('#card-element');

那应该可以解决您的问题。

Answer 2

我没有使用Vue，但是我发现的解决方案也可能适用于您的情况。就我而言，在装载DOM之前已调用了装载#card-element的代码。我通过将其包装在等待所有DOM完全加载然后初始化所有Stripe内容的代码中进行修复。这是一个示例：

window.addEventListener('load',function() {
    var stripe = Stripe("somestripepublickey");
    var card = stripe.elements().create('card').mount('#card-element');

    var vue_test = new Vue({
        el: '#stripeDiv'
    });
});

制表符顺序被条纹卡元素和vue.js破坏

2 个答案: