標簽順序被條紋卡元素和 vue.js 破壞
[英]Tab order broken with stripe card-element and vue.js
問題描述
當使用 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>
當您通過 Tab 鍵瀏覽它時，您會在離開條紋字段后立即進入頂部輸入框。 您應該最終出現在底部的輸入框中。 當我刪除 Vue 的東西時，它就起作用了。
我知道我可以在 onfocus 上使用一些 js，但我寧願不這樣做。
PS：不需要條帶帳戶來測試這個。
2 個解決方案
解決方案1
0 2018-08-09 21:59:57
您只需要更改 Javascript 的順序。 安裝 card 元素對 dom 做了很多瘋狂的事情。
var stripe = Stripe("somestripepublickey");
var vue_test = new Vue({
el: '#stripeDiv'
});
var card = stripe.elements().create('card').mount('#card-element');
不過，這應該可以解決您的問題。
解決方案2
0 2020-10-16 01:40:39
我沒有使用 Vue，但我找到的解決方案也可能適用於您的情況。 就我而言，在加載 DOM 之前調用了掛載#card-element的代碼。 我通過將它包裝在代碼中來修復它，在初始化所有 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'
});
});
條紋“卡片元素”不可見（Python/Django）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.