qq_遁去的一_1
2023-05-25 17:12:56
我構(gòu)建了一個(gè)應(yīng)用程序,可以在表格內(nèi)外進(jìn)行輸入。我注意到使用 tab 鍵并沒有循環(huán)遍歷所有的交互元素。如果我將光標(biāo)放在第一個(gè)輸入字段中,我可以一直跳到表格的第一行(其中包含三個(gè)輸入和一個(gè)按鈕),但是,當(dāng)我到達(dá)第二個(gè)輸入字段并點(diǎn)擊 Tab 鍵時(shí),焦點(diǎn)返回到表行的第一個(gè)輸入,而不是移動到第三個(gè)輸入。如果我單擊以關(guān)注表中的第三個(gè)輸入,tab 一次將返回到表(它似乎專注于 tbody?),然后 tab 再次返回到表行中的第一個(gè)輸入。正如預(yù)期的那樣,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();? ? ? ? ? ? });關(guān)于為什么我不能瀏覽所有輸入的任何想法?
2 回答

狐的傳說
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
這似乎不是標(biāo)簽索引問題,而是代碼問題。我已經(jīng)追蹤到這段代碼:
// update new pattern yardage data and calculations
patternYardsInput.addEventListener('blur', () => {
pattern.yards = patternYardsInput.value;
saveData();
displayData();
});
在您關(guān)閉該輸入后,這意味著它正在失去焦點(diǎn)(模糊),您正在調(diào)用displayData重寫該 HTML 的方法。由于您關(guān)注的位置不再存在于 DOM 中,因此它會丟棄您使用 tab 鍵關(guān)注的位置。

慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
當(dāng)標(biāo)簽循環(huán)進(jìn)入表格區(qū)域時(shí),它開始循環(huán)表格上的元素,只需將 tabindex 屬性添加到您的表格中,如下所示: tabindex=-1
例如:
<table tabindex=-1 >
添加回答
舉報(bào)
0/150
提交
取消