在網頁中按 tab 鍵,為什麼亂跳?!

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

哪些 html element 是 tab 的作用範圍

  1. href 屬性的 element

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

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

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

  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?