标签顺序被条纹卡元素和 vue.js 破坏
[英]Tab order broken with stripe card-element and vue.js
问题描述
When using Vue.js and having a stripe card-element inside the Vue main element the tabindex is not working properly.
当使用 Vue.js 并且在 Vue 主元素中有条纹卡片元素时，tabindex 无法正常工作。 Check the following code:检查以下代码：
<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>
When you tab through it, you end up in the top input box right after leaving the stripe fields.当您通过 Tab 键浏览它时，您会在离开条纹字段后立即进入顶部输入框。 You should end up in the bottom input box.您应该最终出现在底部的输入框中。 When I remove the Vue stuff, it just works.当我删除 Vue 的东西时，它就起作用了。
I know I could use some js with onfocus, but I'd rather not.我知道我可以在 onfocus 上使用一些 js，但我宁愿不这样做。
PS: no stripe account needed to test this. PS：不需要条带帐户来测试这个。
2 个解决方案
解决方案1
0 2018-08-09 21:59:57
You just need to change the order of your Javascript.您只需要更改 Javascript 的顺序。 Mounting the card element does a lot of crazy stuff to the dom.安装 card 元素对 dom 做了很多疯狂的事情。
var stripe = Stripe("somestripepublickey");
var vue_test = new Vue({
el: '#stripeDiv'
});
var card = stripe.elements().create('card').mount('#card-element');
That should fix your problem though.不过，这应该可以解决您的问题。
解决方案2
0 2020-10-16 01:40:39
I am not using Vue, but the solution I found may apply to your situation as well.我没有使用 Vue，但我找到的解决方案也可能适用于您的情况。 In my case, the code to mount #card-element was being called before the DOM was loaded.就我而言，在加载 DOM 之前调用了挂载#card-element的代码。 I fixed by wrapping it in code that waits until the DOM is fully loaded before initializing all the Stripe stuff.我通过将它包装在代码中来修复它，在初始化所有 Stripe 内容之前等待 DOM 完全加载。 Here's an example:下面是一个例子：
window.addEventListener('load',function() {
var stripe = Stripe("somestripepublickey");
var card = stripe.elements().create('card').mount('#card-element');
var vue_test = new Vue({
el: '#stripeDiv'
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.