[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
设计和构建用户可以通过硬件键盘、屏幕键盘或触摸键盘交互的应用。
提示 本主题中的信息特定于使用 JavaScript 开发应用。
请参阅响应键盘交互 (XAML)，以了解使用 C++、C# 或 Visual Basic 的应用。
请参阅开发鼠标控件 (DirectX and C++) 以了解结合使用 C++ 和 DirectX 的应用。
先决条件: 如果你还不熟悉使用 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) 取消事件的默认操作，而不会阻止事件继续发生。使用 cancelable 检查是否可以取消事件，因为为不可取消的事件调用 preventDefault 将无效。
stopPropagation 将在捕获或浮升事件阶段取消继续发生的事件。但是，该事件将在事件流停止之前调度当前目标上的所有事件侦听器（不论捕获或浮升）。若要完全阻止任何剩余的处理程序运行，请改用 stopImmediatePropagation 方法。
触摸键盘
文本输入控件提供对触摸键盘的自动支持。当用户将输入焦点设置为使用触摸输入的文本控件时，触摸键盘会自动出现。当输入焦点不在文本控件上时，隐藏触摸键盘。
当出现触摸键盘时，会自动重新定位你的 UI 以确保可以看见具有焦点的元素。这可能会导致 UI 的其他重要区域移出屏幕。但是，你可以禁用默认行为并在出现触摸键盘时对自己的 UI 进行调整。有关详细信息，请参阅响应出现屏幕键盘的示例。
如果创建需要文本输入，但并非从标准文本输入控件派生的自定义控件，则可以通过实现正确的 UI 自动化控件模式来添加触摸键盘支持。有关详细信息，请参阅触摸键盘示例。
按下触摸键盘上的键引发 keydown 和 onkeyup 事件，就像在硬件键盘上按下键一样。但是，触摸键盘不会引发 Ctrl+A、Ctrl+Z、Ctrl+X、Ctrl+C 和 Ctrl+V 的输入事件，这些是输入控件中保留的文本操作。
支持键盘交互的用户体验指南
下面是支持键盘交互的指南。
常规
用户应当能够仅使用硬件键盘或屏幕键盘完成你的应用支持的所有任务。注意 触摸键盘仅用于文本输入，并非用于应用或系统命令。
当应用启动时，将初始键盘焦点设置在用户将首先直观（或最有可能）进行交互的元素上。通常，最合适的位置是应用的主要内容视图，以便用户可以立即使用箭头键滚动内容。有关将焦点设置为特定控件的详细信息，请参阅 focus。
请确保 Tab 和箭头键按照逻辑顺序在内容中移动。
对于默认情况下未采用 Tab 键顺序的所有交互 UI 元素，将 tabIndex 属性设置为大于或等于 0 的值。设置 tabIndex 属性很重要，原因是屏幕读取器用户使用 Tab 键在交互 UI 元素之间导航。
使用箭头键作为在复合元素的子元素间进行正确内部导航的键盘快捷方式。如果树状视图节点有单独的子元素，用于处理展开折叠和节点激活，则应使用左右箭头键提供键盘展开折叠功能。
确保可以单击的每个 UI 元素也可以使用键盘进行调用。
为键盘应用功能实现键盘快捷方式。（快捷键是一套键组合，通过为用户提供一种可访问应用功能的高效方法来提高效率。）
访问键是应用中 UI 元素的快捷方式。它由 Alt 键和一个字母键组成。
加速键是应用命令的快捷方式。你的应用可以拥有与命令完全对应的 UI。加速键由 Ctrl 键和一个字母键组成。
你必须为依靠屏幕阅读器和其他辅助技术的用户提供一种发现应用的快捷键的简单方法。使用 accessKey 和 -ms-AcceleratorKey 属性在应用的 HTML 标记中声明快捷键，并使用工具提示、辅助名称、辅助说明或某些其他屏幕通信形式传达快捷键。请记住将快捷键详细记录在应用的帮助内容中。
有关实现快捷键的更多指南，请参阅 Windows 用户体验指南中的 快捷键。
不要重新定义用户期望在每个 Windows 应用商店应用内使用的默认键盘快捷键。请参阅键盘快捷键来获取完整列表。
硬件
查询键盘设备功能 (KeyboardCapabilities) 以确定是否连接键盘，并识别键盘硬件可以直接访问应用 UI 中的哪些方面。有关查询设备功能的详细信息，请参阅快速入门：标识指针设备。
可将键盘按钮与你的应用中的相应 UI（向前和向后按钮）相关联。
视觉反馈
- 仅在进行键盘交互时使用焦点矩形。如果用户开始使用触摸交互，则使键盘 UI 逐渐淡出。 这会使 UI 干净整洁。
- 如果元素不支持交互（如静态文本），不要显示视觉反馈。
- 对于所有代表相同输入目标的元素，同时显示视觉反馈。
- 提供屏幕按钮（如 + 和 -）作为模拟基于触摸的操作 （如平移、旋转、缩放等）的提示。
有关视觉反馈的更一般指南，请参阅视觉反馈指南。
相关主题
概念