# 挖掘鍵盤的潛能 - 趙錦江 (勾三股四)

{%hackmd yEJ_rTxzTWa2K450RqmT8w %}

目前人機交互介面以滑鼠和鍵盤完成

> 鍵盤真的能被完全取代嗎?（可以的話，為什麼手機還會有虛擬鍵盤）

#### 鍵盤最常用的範例
- <input/>
- onchange (trigger after losing focus)
- oninput

#### 密碼強度校驗
- onchange：
- oninput: 每次輸入都觸發

#### 微交互：Enter 鍵
- onkeypress
- onkeydown
- 判斷 enter 按下（keycode: 13）
- onkeyup

#### keycode

> [Keycode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode): 每個按鍵都有不同的 id
> 但不是所有瀏覽器都ㄧ樣
> Deprecated

為什麼keycode被廢棄？

### 因為我們有了新的API !

KeyboardEvent.key
KeyboardEvent.code

key: h, code: KeyH
key: a, code: KeyA
key: A, code: KeyA
key: 8, code: Digit8
key: *, code: Digit8

key: 表面上輸入的內容
code: 實際上按下的物理按鍵

適用 key 的例子：方向鍵（一個完整鍵盤有方向鍵跟數字鍵轉換方向鍵，只需要知道按下的 key 方向即可）
適用 code 的例子：Ctrl + A/a（只需要知道按下的 code，不用管按的是大寫小寫）

#### 對於常用的鍵盤快捷鍵，有沒有更加有效的做法？

[vue-keyboard-over](https://github.com/Jinjiang/vue-keyboard-over)

多討論一些鍵盤快捷鍵的內容
- 用較弱的直觀性換來更高效的操作效率（不想離開鍵盤）
- 重度核心用戶需要完成的高頻操作
- 可以精確輸入豐富資訊的設備

一般 Windows 與 Mac 操作常見例子
- Ctrl + C/V/X 複製貼上
- Ctrl + W 關閉視窗
- Alt + F4
- Command + C/V/X
- Command + W
- Command + Q
- Command + `,` 選項設置
- Command + Shift + `[` 切左 tab
- Command + Shift + `]` 切右 tab

### 為什麼我們需要 key 和 code
提供更寬廣的鍵盤操控能力，而不僅僅是輸入文本

### 除了快捷鍵之外，鍵盤還可以拿來做什麼？

#### `TAB` 導航
- button
- button disabled (tab X)
- a
- span tabindex="0"
- span tabindex="-1" (tab X)

#### Enter/Space/Esc 導航

tab + enter + input focus
esc 回上頁

> 讓用戶能完全透過鍵盤完成所有事

focus track

tab, shift + tab 在 input field 和 button 間移動

#### 方向鍵導航

tab 在 button group 間切換
方向鍵在同一個選項間切換（ex: 性別選項）

#### 更複雜的操控

在長列表中經由首字母來移動（ex: 語言選擇）
[範例](https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-scrollable.html)

#### 再看一個快捷鍵的例子

global 快捷鍵／local 快捷鍵
focus 後 local 快捷鍵才會生效
ex: asdf 依序按下後效果（彩蛋）

### 一些延伸思考

1. Accessibility 可訪問性/無障礙化

滑鼠剛好壞了，鍵盤能否能繼續使用

2. Place-onas

沒有最好的輸入輸出，只有最適合的輸入輸出

The “in a library wearing headphones” placeona is “hands free, eyes free, voice restricted, ears free”.
The “cooking” placeona is “hands dirty, eyes free, ears free, voice free”.
The “nightclub” placeona is “hands free, eyes free, ears busy (you can’t hear), voice busy (you likely can’t speak/can’t be heard)”.
The “driving” placeona is “hands busy, eyes busy, ears free, voice free”.

ref: https://www.intercom.com/blog/benefits-of-voice-ui/

3. 更好的理解人機交互

4. 基於組件化的 UI 架構使其變得更加可行

### 實際上，早在 2008 年...

w3c wai-aria
ref: https://www.w3.org/TR/wai-aria-1.0/usage
> WAI-ARIA divides the semantics into roles (the type defining a user interface element) and states and properties supported by the roles.

### 幫助我們探索未來各式各樣的設備的人機交互方式

### One more thing
GamePad API + Switch JoyCon

將 Switch JoyCon 訊號改為鍵盤事件，操控簡報

最底層的事件其實是「偵測有無按下按鍵」

###### tags: `MW19`