將網頁元素設定聚焦
html focus tabIndex -<span class="clickme" tabIndex="0">click me</span>Why
你真的知道網頁上什麼元素可以被聚焦？ 或許你需要看看 focus test。
How
聚焦方法
-
programmatically focusable 可程式聚焦
使用元素的 `focus` 方法或在元素上放置 `autofocus` 屬性來獲得聚焦。
-
click focusable 可點擊聚焦
如果元素是可以單擊，該元素會在單擊時獲得聚焦。
-
sequentially focusable 可順序聚焦
通過 kbd:[Tab] 來聚焦。
所有可點擊聚焦或可順序聚焦的元素都是可程式聚焦的，因此可以將"可程式聚焦"可以與"可聚焦"視為是同義的。
解決方法
當使用 document.querySelector('span.clickme').focus() 無法得到聚焦結果時，將原本無法聚焦的元素加上 tabIndex="0" 的屬性值，即可。
有了 tabIndex (給的值不能是負的，因為負值是被定義為沒有次序) 元素就變成可順序聚焦的元素，也就是可程式聚焦的。
更多關於對焦的討論，可參考 focusing-on-focus。
閱讀在雲端 