在網頁中按 tab 鍵，為什麼亂跳？!

網路輸入資料也許每天都要發生個好幾次，在輸入表單上按下tab鍵讓輸入焦點可以轉移到下一個輸入框，需要修改時按下shift+tab也可以回到上一個輸入框，這節省了我們需要在鍵盤與滑鼠間轉換的時間，也讓我們看起來專業許多(誤XD)，但有時候難免會遇到按下tab鍵，輸入框卻亂跳，要多按幾下才會到預期的位置，我們就來看看該如何正確設定吧

哪些 html element 是 tab 的作用範圍

1. 有 href 屬性的 element

   • 1-1. HTMLAnchorElement

     就是 超連結

   • 1-2. HTMLAreaElement

     image map(圖片定位)的超連結

2. 表單項目 會跳過設定為 disabled 的element

   • 2-1. HTMLInputElement

     輸入項

   • 2-2. HTMLSelectElement

     下接選單

   • 2-3. HTMLTextAreaElement

     跨行輸入框

   • 2-4. HTMLButtonElement

     按鈕

3. HTMLIFrameElement iframe 內的 element 順序與其他相同

   • HTMLIFrameElement

     iframe

4. 影音相關 會先選取到 audio/video element，接著會到 控制項目

   • 4-1. HTMLVideoElement
   • 4-2. HTMLAudioElement

5. 其他有 tabindex 的 element tabindex < 0 會略過

順序

1. 在有 tabindex >0 的 element 上 按tab 鍵

   • 會依 tabindex 順序移動
   • tabindex 結束，會依 element 在 html 上的順序，由上而下 、由左至右
   • tabindex =0 的 element ，就如同未設定，不會列入 tabindex 的順序
   • tabindex < 0 的 element ，會跳過

2. 尚未選取特定元件

   • element 在 html 上的順序，由上而下 、由左至右

• 測試用 jsbin

參考資料

1. HTML Tag
2. Which HTML elements can receive focus?