在我們公司所有的專案都在 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 + /)，就會出現快速鍵的說明，如下圖所示：
詳見完整的 Azure DevOps Services 快速鍵清單 (Keyboard shortcuts for Azure DevOps and Team Explorer)
控制鍵盤焦點所遇到的問題
由於我們長久以來會面臨到的 HTML 元素的 focus 問題，通常都只是需要對焦在 INPUT 或 TEXTAREA 這種輸入欄位上而已，這種表單欄位的 Element (元素) 呼叫 .focus() 方法其實不太有什麼問題，也很少會遇到什麼地雷。
我這次的需求則是需要讓「鍵盤」的焦點停留在一個有設定「捲軸」的DIV 元素上，這個問題有很困難嗎？我一直以為「所有的元素」幾乎都有 .focus() 方法可以呼叫，也都有 focus 事件可以訂閱，但實則不然，其實大部分「非表單欄位」的元素，都是無法呼叫 .focus() 方法的，或者更精準一點來講：就算呼叫了 .focus() 方法，也不會有任何效果。
回想一下，一般來說我們都是如何控制網頁上的「鍵盤」焦點的？我都是用「滑鼠」在頁面上的「空白處」點擊一下，鍵盤的焦點就會跑到該區域，然後你就可以用「鍵盤」的「空白鍵」來控制頁面的瀏覽，按下 Space 鍵就會往下捲動，按下 Shift + Space 鍵就會往上捲動。
問題來了，這個「點一下」的動作，要怎樣寫成 JavaScript 呢？我發現我連「提問」的能力都沒有，我嘗試了 30 分鐘，問了 ChatGPT 無數個問題，通通找不到我的答案，因為我不知道該怎麼問才夠精準，精準到 AI 可以告訴我答案。如果是你，你會怎樣提問？
重點來了，你知道我是怎樣找出解決方案的嗎？我問了 Stack Overflow 的 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 的回答是錯誤的，但正確答案在參考的資訊來源中！👍
設定在一個無法 focus 的 <div> 元素上
答案在此：javascript - Set keyboard focus to a <div> - Stack Overflow
基本上，要讓 div 元素可以被聚焦，必須有以下條件：
- 只要將
div 元素加上 tabindex 屬性即可
就這樣，就這麼簡單！👍
若你不想讓使用者因為按下 Tab 鍵會移動鍵盤定位在這個 DIV 上面，你可以將 tabindex 屬性設定為 -1，這樣就不會被鍵盤定位到了。
相關連結