You are currently viewing 如何幫網站表單、按鈕新增快速鍵 accesskey

如何幫網站表單、按鈕新增快速鍵 accesskey

你在設計網站時,是不是也想過要幫表單新增一個快速鍵呢?這樣當使用者只要依序輸入完成後,可以在鍵盤上按按鍵就順便送出,不用碰到滑鼠了。一點都不難,你所需要的只是 accesskey屬性!

一、有哪些瀏覽器可以用 accesskey

根據 caniuse網站,可以看到近乎所有的瀏覽器都可以使用。

如何幫網站表單、按鈕新增快速鍵 accesskey 1

二、要怎麼按快速鍵

現在多數的瀏覽器和軟體都有自己的快速鍵,新增快速鍵時某些情況下可能會和瀏覽器或軟體重疊,因此 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只能搭配一個按鍵,所以你只能寫一個值。

四、還有什麼要注意的

除了上述的衝突外,自訂快速鍵雖然有方便的優點,但另一個問題就是訪客並不知道網站有快速鍵可以使用,因此當你設定了快速鍵又沒有告知訪客時,他們有機會自己意外觸發了快速鍵的動作,因此如果要使用ˋ這項功能,建議在網站上進行貼心的說明!

以上就是幫網站功能增加快速鍵的方法!

Sid

喜愛電腦資訊、歷史、古文明、宇宙、自然生態的主題。喜歡看卡通和科幻主題的電影,有長不大的心情。從事金融業相關工作,分享的技巧多來自工作上的各項應用實作。

發佈留言