Angular Material 17+ 高階教程 – CDK Accessibility の Focus

介紹

CDK Focus 是對原生 DOM focus 的上層封裝和擴充套件。

Focus Origin

原生 DOM focus 我們只能知道 element 被 focus 了，但是無法知道它是怎麼被 focus 的，但 CDK Focus 可以。

比如說，有一個 button，我們呢有三種方式可以 focus 它：

1. 用 mouse 點選這個 button

2. 用 keyboard tab

3. 用 Script -- button.focus()

CDK Focus 在監聽到 focus 後，會附帶一個 origin 值，這個 origin 就闡明瞭 focus 的來源

touch (觸屏) 和 mouse 代表使用者點選了按鈕導致了 focus。

keyboard 指的是使用者按鍵 tab 導致了 focus。

program 表示是程式 Script 導致了 focus。

FocusMonitor

好，知道了它的用途，接著我們來看具體程式碼演示。

FocusMonitor 是一個 Root Level Provider，我們需要使用它來監聽 focus 事件。

目錄

上一篇 Angular Material 17+ 高階教程 – Material Ripple

下一篇 TODO

想檢視目錄，請移步 Angular 17+ 高階教程 – 目錄