The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

前端工程研究:如何將鍵盤焦點設定在一個無法 focus 的 DIV 元素上

在我們公司所有的專案都在 Azure DevOps Services 上面管理,從專案管理、原始碼版控、CI/CD、文件管理、測試管理、專案報表等等,都在 Azure DevOps Services 上面,所以我們的團隊成員每天都會花很多時間在 Azure DevOps Services 上面協作。雖然 Azure DevOps Services 也提供了很多鍵盤快速鍵,讓使用者可以更快速的操作,但還是沒辦法滿足我們的需求,所以這個假日我就打算在寫一個 Side Project 擴充更多鍵盤快速鍵。原本以為一個小時內可以完成的,結果卻卡關在一個不起眼的功能上,那就是 DIV 元素無法被 focus 的問題,這會導致你將無法透過鍵盤的「空白鍵」來捲動頁面,我為了提升這個小小的 UX 問題,花了好幾個小時才找到答案,這篇文章就來跟大家分享一下我研究出來的解法。

先看看我遇到的問題

直接看影片吧,注意用鍵盤的「空白鍵」可以將頁面的內容向下或向上捲動:

為什麼控制鍵盤焦點很重要

網站的可及性(Accessibility)其實很多開發者都不太重視,其中一個常見的需求,就是網站瀏覽需要有可替代的「鍵盤操作」能力,也就是說你不能只透過「滑鼠」去操作整個網站,所有功能也都要能透過「鍵盤」來使用。

當然,這樣的需求主要是針對「身心障礙者」所提供,但其實就算你不是「身心障礙者」其實也可能需要這樣的功能。以我個人為例,我對於常用的軟體或網站,都會盡可能的透過「鍵盤」來操作功能,所以會自訂許多快速鍵,以提升電腦的操作效率。

話說回來,其實 Azure DevOps Services 的可及性設計已經非常優秀,內建的「快速鍵」也已經非常多,你只要在 Azure DevOps Services 的任何頁面按下 ? 符號 (Shift + /),就會出現快速鍵的說明,如下圖所示:

Keyboard shortcuts for Azure DevOps

詳見完整的 Azure DevOps Services 快速鍵清單 (Keyboard shortcuts for Azure DevOps and Team Explorer)

控制鍵盤焦點所遇到的問題

由於我們長久以來會面臨到的 HTML 元素的 focus 問題,通常都只是需要對焦在 INPUTTEXTAREA 這種輸入欄位上而已,這種表單欄位的 Element (元素) 呼叫 .focus() 方法其實不太有什麼問題,也很少會遇到什麼地雷。

我這次的需求則是需要讓「鍵盤」的焦點停留在一個有設定「捲軸」的DIV 元素上,這個問題有很困難嗎?我一直以為「所有的元素」幾乎都有 .focus() 方法可以呼叫,也都有 focus 事件可以訂閱,但實則不然,其實大部分「非表單欄位」的元素,都是無法呼叫 .focus() 方法的,或者更精準一點來講:就算呼叫了 .focus() 方法,也不會有任何效果。

回想一下,一般來說我們都是如何控制網頁上的「鍵盤」焦點的?我都是用「滑鼠」在頁面上的「空白處」點擊一下,鍵盤的焦點就會跑到該區域,然後你就可以用「鍵盤」的「空白鍵」來控制頁面的瀏覽,按下 Space 鍵就會往下捲動,按下 Shift + Space 鍵就會往上捲動。

問題來了,這個「點一下」的動作,要怎樣寫成 JavaScript 呢?我發現我連「提問」的能力都沒有,我嘗試了 30 分鐘,問了 ChatGPT 無數個問題,通通找不到我的答案,因為我不知道該怎麼問才夠精準,精準到 AI 可以告訴我答案。如果是你,你會怎樣提問?

重點來了,你知道我是怎樣找出解決方案的嗎?我問了 Stack OverflowOverflowAI Search 功能!

OverflowAI Search

真的不誇張,一次提問就讓我找到答案,精準度與正確性都完勝 ChatGPT,而且還有 Stack Overflow 上面的完整參考資料!

我的提問內容是:

There are many scrollable area in a web page. When I use the mouse to click on a scrollable DIV on a web page, I can hit Space key to scroll down on that part of a HTML page. When focus lost, I can't hit Space key to scroll on that area. What if I want to get focus again to that area so that I can let user hit Space key to scroll. What can I do using JS?

不過,其實 OverflowAI Search 的回答是錯誤的,但正確答案在參考的資訊來源中!👍

OverflowAI Search - Answers

設定在一個無法 focus 的 <div> 元素上

答案在此:javascript - Set keyboard focus to a <div> - Stack Overflow

基本上,要讓 div 元素可以被聚焦,必須有以下條件:

  1. 只要將 div 元素加上 tabindex 屬性即可

就這樣,就這麼簡單!👍

若你不想讓使用者因為按下 Tab 鍵會移動鍵盤定位在這個 DIV 上面,你可以將 tabindex 屬性設定為 -1,這樣就不會被鍵盤定位到了。

相關連結

留言評論