标签顺序被条纹卡元素和 vue.js 破坏 [英] Tab order broken with stripe card-element and vue.js
问题描述
当使用 Vue.js 并且在 Vue 主元素中有条纹卡片元素时，tabindex 无法正常工作.检查以下代码:
<头><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://js.stripe.com/v3/"></script><身体><input type="text" placeholder="页面上的第一个标签元素"><br/><br/><div id="stripeDiv"><div id="card-element" style="border: 1px solid black;max-width:300px"><!-- 将在此处插入条纹元素.--><div id="card-errors" role="alert"></div>
<br/><input type="text" placeholder="条形表格后的标签元素"><br/><脚本>var stripe = Stripe("somestripepublickey");var card = stripe.elements().create('card').mount('#card-element');var vue_test = new Vue({el: '#stripeDiv'});</html>
当您通过 Tab 键浏览它时，您会在离开条纹字段后立即进入顶部输入框.您应该最终出现在底部的输入框中.当我删除 Vue 的东西时，它就起作用了.
我知道我可以使用一些带有 onfocus 的 js，但我宁愿不要.
PS:不需要条带帐户来测试这个.
我没有使用 Vue，但我找到的解决方案可能也适用于您的情况.就我而言，挂载 #card-element 的代码在加载 DOM 之前被调用.我通过将它包装在代码中来修复它，在初始化所有 Stripe 内容之前等待 DOM 完全加载.举个例子:
window.addEventListener('load',function() {var stripe = Stripe(somestripepublickey");var card = stripe.elements().create('card').mount('#card-element');var vue_test = new Vue({el: '#stripeDiv'});});When using Vue.js and having a stripe card-element inside the Vue main element the tabindex is not working properly. 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. You should end up in the bottom input box. When I remove the Vue stuff, it just works.
I know I could use some js with onfocus, but I'd rather not.
PS: no stripe account needed to test this.
I am not using Vue, but the solution I found may apply to your situation as well. In my case, the code to mount #card-element was being called before the DOM was loaded. I fixed by wrapping it in code that waits until the DOM is fully loaded before initializing all the Stripe stuff. 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'
});
});
这篇关于标签顺序被条纹卡元素和 vue.js 破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
