透過 Tab 鍵指定網頁中元素 - Trista H.

Trista H.'s website.唯 - Trista's little space

透過 Tab 鍵指定網頁中元素


使用 TAB 按鍵指定網頁裡的元素,可以參考 本連結 - 使用 Tab 鍵控制焦點

我的應用情境是在繪製表格時,需要跨 <tr>...</tr> 選取 input 進行輸入,這時候設定相同的 tabindex="N" * ( n 是數字 ),可以進行類似“群組化的概念”。

例如:


Name
Name
Name
Name
Name

HTML - 用 Tab 指定網頁元素的示意圖

在表格上按下 TAB 按鍵可以發現是先由上往下,再由左往右的每列切換,那是因為我在第一個 TD 中的 input 統一下了 tabindex 為 1,而其他 input 皆為 2,所以在選取時,會依照第一個群組的順序切換,接著跳到第二個群組依序切換。

如果希望一直都是由上到下可以嘗試設為 2 跟 3 喔!


  • self-talk (3)
  • my-site (2)
  • VUE (2)
  • VUE2 (2)
  • VUE3 (1)
  • frontend (1)
  • i18n (1)
  • vscode (1)