我正在使用 Vue.js 開發一個 Web 應用程式。我有一個包含 5 個欄位的資料輸入表單。業務需求是選項卡按鍵，它應該關注第一個輸入框，而在后續選項卡上，下一個元素應該關注。我已經使用 tabindex 屬性對元素進行了歸檔。
現在我面臨的問題是在表單元素結束之后，當我們點擊 tab 時，它會轉到未定義 tabindex 的其他元素，例如鏈接和瀏覽器的 URL 欄。
我想要的是，如果我有 6 個元素（5 個文本框 1 個提交按鈕）并且我已經將 tabindex 從 1 設定為 6，而不是在 tabindex 6 的元素處再次設定 tab 后，它應該再次關注 tabindex 1 并忽略網頁上的其他鏈接和按鈕.
uj5u.com熱心網友回復：
僅供參考 - 這是@RohitJindal使用Vue 3 組合 API的Vue 2答案
修改后第一個元素上的 shift-tab 移動到最后一個元素
注意：如果你想這樣做，你需要重新編號你的標簽索引
const { createApp, onMounted } = Vue;
createApp({
setup() {
const focusFirst = () => {
document.querySelector('[tabindex="2"]').focus();
}
const focusLast = () => {
document.querySelector('[tabindex="6"]').focus();
}
onMounted(focusFirst);
return { focusFirst, focusLast};
}
}).mount('#app');<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
<span tabindex="1" @focus="focusLast"></span>
<input type="text" tabindex="2"/><br>
<input type="text" tabindex="3"/><br>
<input type="text" tabindex="4"/><br>
<input type="text" tabindex="5"/><br>
<button id="button" tabindex="6">Submit</button>
<span tabindex="7" @focus="focusFirst"></span>
</div>uj5u.com熱心網友回復：
您可以在不使用tabindex.
Vue.js 允許使用這種語法選擇 DOM 元素this.$refs.name
（如果它不起作用，你可以嘗試this.$el.querySelector('yourElementSelector')
選擇元素后，您可以添加focus()到它。例如this.$refs.name.focus()；
在您的具體情況下，您可以在選項卡上的事件this.$refs.name.focus()之后添加。onclick
這將在單擊后立即聚焦元素
uj5u.com熱心網友回復：
tabIndex您可以通過在最后一個索引元素的末尾放置一個空跨度來防止焦點在外部。給它一個事件id和tabindex = 0一個onfocus事件，觸發它有助于專注于第一個tabindex元素。
<span tabindex="0" id="prevent-outside-focus" onfocus="foucsFirstTabIndex()"></span>
現場演示：
new Vue({
el: '#app',
mounted() {
document.getElementById('field1').focus();
},
methods: {
foucsFirstTabIndex() {
document.getElementById("field1").focus();
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" id="field1" tabindex="1"/><br>
<input type="text" id="field2" tabindex="2"/><br>
<input type="text" id="field3" tabindex="3"/><br>
<input type="text" id="field4" tabindex="4"/><br>
<button id="button" tabindex="5">Submit</button>
<span tabindex="0" id="prevent-outside-focus" @focus="foucsFirstTabIndex()"></span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495883.html
標籤：javascript html Vue.js 网络 Vuejs3
上一篇：“URL安全”是什么意思？