在給如div等元素綁定鍵盤事件(如keydown)時(shí)蜒秤, 會(huì)發(fā)現(xiàn)綁定是失效的。
解決方法:
給當(dāng)前元素增加 tabindex 屬性:
<div tabindex="-1"></div>
原理:
div等非輸入性質(zhì)的元素(與其對(duì)應(yīng)的可輸入性元素有input, textarea)潜慎, 是不可被聚焦的。 所以無法監(jiān)聽其的鍵盤事件歹嘹。
而通過增加 tabindex 屬性,可以指定該元素可觸焦温技。
關(guān)于tabindex(引自MDN):
tabindex 全局屬性 是個(gè)整數(shù)欢摄,表示元素(如果可聚焦)是否能夠接受輸入焦點(diǎn)。 如果它應(yīng)該參與鍵盤序列導(dǎo)航农尖,那么就是它的位置析恋。
它可以設(shè)為多種值:
tabindex=負(fù)值 (通常是tabindex=“-1”),表示元素是可聚焦的盛卡,但是不能通過鍵盤導(dǎo)航來訪問到該元素助隧,用JS做頁面小組件內(nèi)部鍵盤導(dǎo)航的時(shí)候非常有用。
tabindex="0" 滑沧,表示元素是可聚焦的并村,并且可以通過鍵盤導(dǎo)航來聚焦到該元素,它的相對(duì)順序是當(dāng)前處于的DOM結(jié)構(gòu)來決定的滓技。
tabindex=正值哩牍,表示元素是可聚焦的,并且可以通過鍵盤導(dǎo)航來訪問到該元素令漂;它的相對(duì)順序按照tabindex 的數(shù)值遞增而滯后獲焦膝昆。如果多個(gè)元素?fù)碛邢嗤?tabindex,它們的相對(duì)順序按照他們?cè)诋?dāng)前DOM中的先后順序決定叠必。
根據(jù)鍵盤序列導(dǎo)航的順序荚孵,值為 0 、非法值纬朝、或者沒有 tabindex 值的元素應(yīng)該放置在 tabindex 值為正值的元素后面收叶。
如果我們?cè)?<div> 上設(shè)置了 tabindex 屬性,它的子元素內(nèi)容不能使用箭頭鍵來滾動(dòng)共苛,除非我們?cè)趦?nèi)容上也設(shè)置 tabindex判没。
注:tabindex 的最大值不應(yīng)超過 32767。如果沒有指定隅茎,它的默認(rèn)值為 -1澄峰。
相關(guān)鏈接:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex