亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

即使使用 tabindex="0",交互式元素也不會通過 tab 獲得焦點

即使使用 tabindex="0",交互式元素也不會通過 tab 獲得焦點

qq_遁去的一_1 2023-05-25 17:12:56
我構建了一個應用程序,可以在表格內外進行輸入。我注意到使用 tab 鍵并沒有循環遍歷所有的交互元素。如果我將光標放在第一個輸入字段中,我可以一直跳到表格的第一行(其中包含三個輸入和一個按鈕),但是,當我到達第二個輸入字段并點擊 Tab 鍵時,焦點返回到表行的第一個輸入,而不是移動到第三個輸入。如果我單擊以關注表中的第三個輸入,tab 一次將返回到表(它似乎專注于 tbody?),然后 tab 再次返回到表行中的第一個輸入。正如預期的那樣,Shift+tab 退出表格。我嘗試添加tabindex="0"沒有變化。使用 JavaScript 生成的 HTML,問題代碼從第 131 行開始:// add cost per? ? ? ? ? ? const costPer = newRow.insertCell();? ? ? ? ? ? const costPerInput = document.createElement('input');? ? ? ? ? ? costPerInput.className = 'input-table num';? ? ? ? ? ? costPerInput.value = yarn.costPer;? ? ? ? ? ? costPer.appendChild(costPerInput);? ? ? ? ? ? costPerInput.addEventListener('blur', () => {? ? ? ? ? ? ? ? yarn.costPer = costPerInput.value;? ? ? ? ? ? ? ? saveData();? ? ? ? ? ? ? ? displayData();? ? ? ? ? ? });關于為什么我不能瀏覽所有輸入的任何想法?
查看完整描述

2 回答

?
狐的傳說

TA貢獻1804條經驗 獲得超3個贊

這似乎不是標簽索引問題,而是代碼問題。我已經追蹤到這段代碼:


// update new pattern yardage data and calculations

patternYardsInput.addEventListener('blur', () => {

    pattern.yards = patternYardsInput.value;

    saveData();

    displayData();

});

在您關閉該輸入后,這意味著它正在失去焦點(模糊),您正在調用displayData重寫該 HTML 的方法。由于您關注的位置不再存在于 DOM 中,因此它會丟棄您使用 tab 鍵關注的位置。


查看完整回答
反對 回復 2023-05-25
?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

當標簽循環進入表格區域時,它開始循環表格上的元素,只需將 tabindex 屬性添加到您的表格中,如下所示: tabindex=-1

例如:

<table tabindex=-1 >


查看完整回答
反對 回復 2023-05-25
  • 2 回答
  • 0 關注
  • 248 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號