回應鍵盤互動 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
設計和建置使用者可以透過硬體鍵盤、螢幕小鍵盤或觸控式鍵盤進行互動的應用程式。
秘訣 這個主題的資訊是專門用來開發使用 JavaScript 的應用程式。
對於使用 C++、C# 或 Visual Basic 的應用程式，請參閱回應鍵盤互動 (XAML)。
對於使用 DirectX 搭配 C++ 的應用程式，請參閱開發滑鼠控制項 (DirectX 和 C++)。
先決條件: 如果您是使用 JavaScript 開發應用程式的新手，請仔細閱讀這些主題以熟悉這裡討論的技術。
使用 JavaScript 建立您的第一個 Windows 市集應用程式
使用 JavaScript 建立 Windows 市集應用程式的藍圖
請參閱快速入門：新增 HTML 控制項和處理事件以了解事件
應用程式功能，從開始到完成:
在應用程式功能，從開始到完成系列深入探索此功能。
使用者經驗指導方針:
平台控制項程式庫 (HTML 和 XAML) 提供完整的 Windows 使用者互動體驗，包含標準互動、動畫物理效果及視覺化回饋。 如果您不需要自訂的互動支援，請使用這些內建控制項。
如果平台控制項不足，下列使用者互動指導方針能讓您在各種輸入模式下提供令人讚賞的沈浸式互動體驗。這些指導方針主要著重在觸控輸入，不過與觸控板、滑鼠、鍵盤和手寫筆輸入仍有相關。
範例: 在應用程式範例中，查看此功能的執行方式。
概觀
鍵盤輸入是應用程式整體使用者互動經驗的一個重要部分。對於某些行動不便的人或認為使用鍵盤與應用程式互動較有效率的使用者來說，鍵盤是不可或缺的。例如，使用者必須能夠使用 Tab 和方向鍵來瀏覽您的應用程式、使用空格鍵和 Enter 鍵來啟用 UI 元素，以及使用鍵盤快速鍵來存取命令。
設計良好的鍵盤 UI 是軟體協助工具的一個重要層面。它讓視障使用者或受到某種程度運動神經傷害的使用者能夠瀏覽應用程式並與應用程式的功能互動。這類使用者有可能無法使用滑鼠，因而必須仰賴像鍵盤增強功能工具、螢幕小鍵盤、螢幕放大機、螢幕助讀程式以及語音輸入公用程式這類協助技術。
最常見的鍵盤類型是與裝置連接的外接式硬體鍵盤。除了硬體鍵盤之外，Windows 8 還提供兩種軟體鍵盤：
螢幕小鍵盤是可在 Windows 中使用的軟體鍵盤，可用來取代實體鍵盤，透過觸控、滑鼠、畫筆/手寫筆或其他指標裝置 (不需要觸控式螢幕) 來輸入資料。提供螢幕小鍵盤的用意是針對沒有實體鍵盤的系統，或者使用者因行動不便而無法使用傳統實體輸入裝置的情況。螢幕小鍵盤會模擬絕大部分的硬體鍵盤功能。
.png "螢幕小鍵盤")
觸控式鍵盤是視覺化的軟體鍵盤，使用觸控輸入來輸入文字。觸控式鍵盤不能取代 Windows 中的螢幕小鍵盤，因為它只能輸入文字 (它不會模擬硬體鍵盤)，而且只有文字欄位或其他可編輯的文字控制項得到焦點之後，才會顯示。
注意 螢幕小鍵盤的優先順序高於觸控式鍵盤，如果顯示螢幕小鍵盤，就不會顯示觸控式鍵盤。
以下是觸控式鍵盤的範例。
Windows - 預設配置:
.png "預設配置的觸控式鍵盤")
Windows - 拇指配置 (並非所有語言都可以使用):
.png "拇指配置的觸控式鍵盤")
Windows Phone - 預設配置:
.png "Windows Phone 觸控式鍵盤")
鍵盤事件
硬體和觸控式鍵盤都有可能發生以下的鍵盤事件。
| 事件 | 說明 |
|---|---|
| keydown | 按下任一鍵時發生。 |
| keyup | 放開任一鍵時發生。 |
| keypress | 按下英數鍵時發生。 |
鍵盤事件和焦點
您 UI 中的控制項只有在取得輸入焦點時才會產生鍵盤事件。個別控制項會在使用者直接按一下或點選配置上的控制項時取得焦點，或是在內容區域內使用 Tab 鍵進入 Tab 順序時取得焦點。
您也可以呼叫 focus 方法來強制取得焦點。這種方式在實作快速鍵時很必要，因為 UI 載入時預設並沒有設定鍵盤焦點。如需詳細資訊，請參閱這個主題中後面的快速鍵範例。
為了讓控制項接收輸入焦點，必須啟用並顯示控制項。這是大多數控制項的預設狀態。當控制項取得輸入焦點時，它就可以引發和回應鍵盤輸入事件，如這個主題後面所述。處理 focus、focusin、blur 和 focusout 事件也可以回應取得或失去焦點的控制項。
根據預設，控制項的 Tab 順序是依據它們在 HTML 上出現的順序。不過，使用 tabIndex 屬性就可以修改這個順序。如需詳細資訊，請參閱實作鍵盤協助工具 (HTML)。
鍵盤事件處理常式
建議您以程式設計方式新增事件處理常式，而不要在 HTML 中以宣告方式新增事件處理常式 (請參閱為什麼不應該在標記中設定事件處理常式)。
有三種輸入事件直接與鍵盤互動產生關聯：keydown、keyup 及 keypress。
大多數的事件處理常式只會接受一個引數，也就是包含事件資訊的 Event object。其中一些最有幫助的鍵盤事件屬性包括 target、keyCode 及 currentTarget (如果允許事件反昇)。
按鍵
通常您接聽鍵盤事件是為了處理特定的按鍵值。若要判斷按下或放開的是哪一個按鍵，請檢查事件資料中的 keyCode 值。keyCode 會傳回 Key 值。Key 列舉包括所有受支援的按鍵。
鍵盤快速鍵
除了實作應用程式的鍵盤瀏覽以及啟用功能之外，實作應用程式功能的捷徑也是不錯的做法。「捷徑」**是一種鍵盤組合 (通常是由字母鍵與輔助按鍵所組合)，可讓使用者更有效率地存取應用程式功能，提高工作效率。
便捷鍵是連至應用程式中某部分 UI 的捷徑。便捷鍵包含 Alt 鍵和一個字母鍵。
「快速鍵」是應用程式命令的捷徑。您的應用程式不一定會包含準確對應到命令的 UI。快速鍵包含 Ctrl 鍵和/或 Shift 鍵以及一個字母鍵。
x-ms-acceleratorKey 屬性讓您通知螢幕助讀程式和其他輔助技術存在快速鍵。這個屬性不提供快速鍵行為。您必須提供鍵盤事件處理常式 (例如 keydown、keyup 和 keypress) 才能處理應用程式中的快速鍵。
接聽和處理鍵盤事件
現在我們要說明如何為 keydown 事件指定和定義處理常式。
注意 這些範例取自自訂使用者互動範例，而後者支援使用者互動自訂，從開始到完成 (HTML) 主題。
這個事件處理常式會篩選所有按鍵輸入，然後只處理向左鍵與向右****鍵。
// Key down handler.
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
// Process keystroke only if color selected.
if (!that.selectedColor) {
return;
}
if (eventInfo.target === msGesture_ColorMixer.target) {
if (that._focus === false) {
return;
}
// Set increment or decrement value based on key pressed.
var increment;
if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
increment = -1;
}
else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
increment = 1;
}
else return;
// Attach first contact and track input device type.
if (!that._pointerType) {
that._pointerType = "keyboard";
}
// Rotate the color mixer.
_Rotate(increment);
// Event tracking.
//document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
}
}, false);
使用 accesskey 與 x-ms-acceleratorkey 屬性，在 HTML 標記中宣告快速鍵。
<div class="ColorSelector" id="colorSelector">
<!--
The aria-label attribute can be used when:
- the name of an element cannot be determined
programmatically from the content of the element.
- providing a visible label and/or tooltip is not
the desired user experience.
However, if the label text is visible on screen, you should
use aria-labelledby instead of aria-label.
-->
<div class="Color"
id="red"
aria-labelledby="redLabel redValue"
tabindex="0"
accesskey="R">
<span class="ColorLabel"
id="redLabel"
data-win-res="{textContent: 'colorpicker_red'}" />
<span class="ColorValue" id="redValue" />
</div>
<div class="Color"
id="green"
aria-labelledby="greenLabel greenValue"
tabindex="0"
accesskey="G">
<span class="ColorLabel"
id="greenLabel"
data-win-res="{textContent: 'colorpicker_green'}" />
<span class="ColorValue" id="greenValue" />
</div>
<div class="Color"
id="blue"
aria-labelledby="blueLabel blueValue"
tabindex="0"
accesskey="B">
<span class="ColorLabel"
id="blueLabel"
data-win-res="{textContent: 'colorpicker_blue'}" />
<span class="ColorValue" id="blueValue" />
</div>
<!--
Ctrl+S invokes the Save button and is exposed by a tooltip.
-->
<button
id="sendButton"
value="Send"
title="Send (Ctrl+S)"
x-ms-acceleratorkey="S">Send</button>
架構可支援用來設定焦點或叫用元素的鍵盤功能，但您必須實作鍵盤事件處理常式 (例如 keydown、keyup 及 keypress)，才能處理應用程式中的快速鍵。
var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
var itm = e.srcElement;
if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
// Invoke send functionality.
}
});
事件修飾元
preventDefault 不需要先停止透過文件物件模型 (DOM) 傳播，即可取消事件的預設動作。因為針對無法取消的事件呼叫 preventDefault 時，不會產生任何作用，所以應該使用 cancelable 檢查事件是否可取消。
stopPropagation 會在擷取或反昇事件階段取消事件傳播。不過，事件流程停止之前，會將事件分派給目前目標上的所有事件接聽程式 (無論是擷取或反昇)。若要讓所有剩餘的處理常式完全無法執行，請改用 stopImmediatePropagation 方法。
觸控式鍵盤
文字輸入控制項會自動支援觸控式鍵盤。當使用者使用觸控輸入將輸入焦點設為文字控制項時，觸控式鍵盤會自動出現。當輸入焦點不在文字控制項時，觸控式鍵盤就會隱藏起來。
當觸控式鍵盤出現時，它會自動定位您的 UI，以確保取得焦點的元素保持永遠可見。這可能會造成 UI 中其他重要的區域跑到螢幕外。不過，您可以停用預設行為，並在觸控式鍵盤出現時調整 UI。如需詳細資訊，請參閱回應螢幕小鍵盤外觀的範例。
如果建立需要文字輸入但不是從標準輸入控制項衍生的自訂控制項，您可以實作正確的 UI 自動化控制項模式來加入對觸控式鍵盤的支援。如需詳細資訊，請參閱觸控式鍵盤範例。
按下觸控式鍵盤上的按鍵，就像按下硬體鍵盤上的按鈕一樣，會引發 keydown 與 onkeyup 事件。不過，觸控式鍵盤將不會引發 Ctrl+A、Ctrl+Z、Ctrl+X、Ctrl+C 以及 Ctrl+V 的輸入事件，因為它們是保留給輸入控制項的文字操作。
支援鍵盤互動的使用者經驗指導方針
以下為一些支援鍵盤互動的指導方針。
一般
使用者必須能夠單獨使用硬體鍵盤或螢幕小鍵盤，完成應用程式支援的所有工作。注意 觸控式鍵盤僅適用於文字輸入，不適用於應用程式或系統命令。
當應用程式啟動時，將起始鍵盤焦點設在使用者最先直覺 (或最有可能) 互動的元素上。通常，最適當的位置是應用程式的主要內容檢視，這樣使用者就能立即使用方向鍵捲動內容。如需將焦點設在特定控制項的詳細資訊，請參閱focus。
確定 Tab 鍵和方向鍵能夠以邏輯順序在內容中移動。
如果互動式 UI 預設未在定位順序中，請將這些互動式 UI 的 tabIndex 屬性設定成大於或等於 0 的值。設定 tabIndex 屬性很重要，因為螢幕助讀程式使用者就是使用 Tab 鍵與 UI 元素進行互動。
使用方向鍵做為鍵盤快速鍵，以便在複合元素中的各個子元素之間瀏覽。如果樹狀檢視節點使用獨立的子元素來處理展開折疊以及節點啟動，請使用向左鍵或向右鍵，提供鍵盤展開折疊功能。
確定可以用鍵盤叫用可按一下的每個 UI 元素。
實作主應用程式功能的鍵盤快速鍵。(捷徑是一種按鍵組合，可讓使用者更有效率地存取應用程式功能，提高生產力)。
便捷鍵是應用程式的 UI 元素捷徑。它包含 Alt 鍵和一個字母按鍵。
「快速鍵」是應用程式命令的捷徑。您的應用程式可以包含準確對應到命令的 UI。快速鍵包含 Ctrl 鍵和一個字母按鍵。
請為依賴螢幕助讀程式或其他輔助技術的使用者，提供一種便利的方法，讓他們找到應用程式的快速鍵。請您使用 accessKey 和 -ms-AcceleratorKey 屬性，在應用程式的 HTML 標記中宣告快速鍵，並透過工具提示、無障礙名稱、無障礙說明，或是其他螢幕上顯示的方式，讓使用者知道快速鍵。請記得在應用程式的說明內容中，詳細記載快速鍵。
如需實作快速鍵的指引，請參閱《Windows 使用者體驗指導方針》中的快速鍵。
不要重新定義使用者預期在每個 Windows 市集應用程式看到的預設鍵盤快速鍵。如需完整清單，請參閱鍵盤快速鍵。
硬體
查詢鍵盤裝置的功能 (KeyboardCapabilities)，判斷是否有連接鍵盤，了解鍵盤硬體可以直接存取應用程式 UI 的什麼層面。如需查詢裝置功能的詳細資訊，請參閱快速入門：識別指標裝置。
請設定鍵盤按鈕與應用程式中適當 UI (上一頁和下一頁按鈕) 的關聯。
視覺化回饋
- 請只搭配鍵盤互動使用焦點矩形。如果使用者初始化觸控互動，讓鍵盤 UI 逐漸淡出。 這可以讓 UI 保持整齊、不凌亂。
- 如果元素不支援互動 (例如靜態文字)，請勿顯示視覺化回饋。
- 如果所有元素均代表相同的輸入目標，請同時顯示視覺化回饋。
- 提供模擬觸控式操作 (例如移動瀏覽、旋轉、縮放等等) 的螢幕上按鈕 (例如 + 和 -) 做為提示。
如需視覺化回饋的詳細一般指導方針，請參閱視覺化回饋的指導方針。
相關主題
概念