網路輸入資料，按 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?