你在設計網站時,是不是也想過要幫表單新增一個快速鍵呢?這樣當使用者只要依序輸入完成後,可以在鍵盤上按按鍵就順便送出,不用碰到滑鼠了。一點都不難,你所需要的只是 accesskey屬性!
一、有哪些瀏覽器可以用 accesskey
根據 caniuse網站,可以看到近乎所有的瀏覽器都可以使用。
二、要怎麼按快速鍵
現在多數的瀏覽器和軟體都有自己的快速鍵,新增快速鍵時某些情況下可能會和瀏覽器或軟體重疊,因此 accesskey屬性所使用的快速鍵是以「alt + 按鍵」為主。但是!
Firefox:Windows 要用「alt+shift+按鍵」 Mac要用「Control+Option+按鍵 或 Control+Alt+按鍵」
Chrome、Safari在 Mac 要用「Control+Alt+按鍵」
三、如何使用 accessskey快速鍵寫在元素上
<element accesskey="character">
例如:<button type="submit" accesskey="g">前往</button> 當使用者按下 alt+g 時就會進行送出動作
當然你也可以用在 a標籤
<a href="https://life.aceidlo.net/" accesskey="k">開啟網站</a> 當使用者按下 alt+k時,就會開啟指定的網站。
範例:當你按下 alt+t 的時候會前往我的網站。
accesskey屬於全域屬性,因此你可以搭配不同的標籤來進行動作。
目前 accesskey只能搭配一個按鍵,所以你只能寫一個值。
四、還有什麼要注意的
除了上述的衝突外,自訂快速鍵雖然有方便的優點,但另一個問題就是訪客並不知道網站有快速鍵可以使用,因此當你設定了快速鍵又沒有告知訪客時,他們有機會自己意外觸發了快速鍵的動作,因此如果要使用ˋ這項功能,建議在網站上進行貼心的說明!
以上就是幫網站功能增加快速鍵的方法!