触摸键盘指南

触摸键盘使 Windows 应用商店应用可以在支持触摸的设备上输入文本,并且在用户点击可编辑输入字段时可调用它。触摸键盘仅用于文本输入,不包含命令键,如 Alt 或功能键。

可以以两种方式之一解除键盘:

  • 提交表单后。
  • 调用“隐藏键盘”命令,如下所示。

    触摸键盘上的“隐藏键盘”命令

当用户在表单的控件之间导航时,触摸键盘通常保持可见。 此行为可能根据表单中的其他控件类型而有所不同。

请将此操作功能视为我们的应用功能大全系列的一部分。:  用户交互操作:触摸屏输入等

应做事项和禁止事项

  • 仅为输入文本目的显示触摸键盘。 请注意,触摸键盘没有提供硬件键盘上的加速键或命令键,如 Alt、功能键或 Windows 徽标键。
  • 不要将来自触摸键盘的输入重新定义为命令或快捷键。
  • 不要让用户使用触摸键盘导航应用。

触摸键盘和自定义 UI

这些建议仅在你的应用使用自定义控件时才相关。默认情况下,由 Windows 提供的文本输入控件可与触摸键盘正常交互。如果你使用 C#/VB/C++ 和 XAML 创建自定义 UI,请使用 AutomationPeer class 访问 UI 自动化控件。输入:触摸键盘示例显示了如何在使用 XAML 的应用中使用自定义控件启动触摸键盘。

如果你使用的是 JavaScript 和 HTML,则必须通过为自定义控件设置可访问富 Internet 应用程序 (ARIA) 属性来访问 UI 自动化。请参阅将 ARIA 角色映射至 UI 自动化以获得详细信息。

  • 在与表单的整个交互中显示键盘。

    请确保你的自定义控件拥有正确的 UI Automation ControlType,以确保在焦点从文本输入字段移出,但仍然位于文本输入的上下文中时保持键盘始终显示。例如,如果在文本输入时打开了一个菜单,但你希望该键盘仍然显示,那么该菜单必须包含 ControlType 菜单。对于使用 C#/VB/C++ 和 XAML 的应用,请参阅 AutomationControlType enumeration。对于 JavaScript 和 HTML,将 ARIA 角色设置为对应的控件类型。

  • 确保用户在输入时始终可以看到输入字段。

    触摸键盘会占用一半的屏幕。Windows 应用商店应用通过确保包含焦点的输入字段滚动到视图中,从而在显示触摸键盘时提供管理 UI 的默认体验。在自定义你的 UI 时,处理 InputPane 对象显示的 ShowingHiding 事件来自定义应用对键盘外观的响应。

  • 不要操作 UI Automation 属性来控制触摸键盘。其他辅助工具依赖于 UI Automation 属性的精度。

  • 为具有文本输入的自定义控件实现 UI Automation 属性。若要在焦点更改到其他控件时使键盘继续显示在上下文中,自定义控件必须具有以下属性之一:

    • 按钮
    • 复选框
    • 组合框
    • 单选按钮
    • 滚动条
    • 树项目
    • 菜单
    • 菜单项

    对于使用 C#/VB/C++ 和 XAML 的应用,请参阅 AutomationControlType enumeration。对于 JavaScript 和 HTML,将 ARIA 角色设置为对应的控件类型。

其他使用指南

处理 Showing 和 Hiding 事件

下面是关于附加触摸键盘的 showinghiding 事件的事件处理程序的示例。



<SCRIPT type=”text/javascript”>
    Windows.UI.ViewManagement.InputPane.getForCurrentView().addEventListener("showing", onInputPaneShowing);
    Windows.UI.ViewManagement.InputPane.getForCurrentView().addEventListener("hiding", onInputPaneHiding);

// Handle the showing event.
function onInputPaneShowing(e)
{
    var occludedRect = e.occludedRect;

    // For this hypothetical application, the developer decided that 400 pixels is
    // the minimum height that will work for the current layout. When the
    // app gets the InputPaneShowing message, the pane is beginning to animate in.

    if (occludedRect.Top < 400)
    {
        // In this scenario, the developer decides to remove some elements (perhaps
        // a fixed navbar) and dim the screen to give focus to the text element.
        var elementsToRemove = document.getElementsByName("extraneousElements");

        // The app developer is not using default framework animation.
        _StartElementRemovalAnimations(elementsToRemove);
        _StartScreenDimAnimation();
    } 

    // This developer doesn't want the framework’s focused element visibility
    // code/animation to override the custom logic.
    e.ensuredFocusedElementInView = true;
}

// Handle the hiding event.
function onInputPaneHiding(e)
{
    // In this case, the Input Pane is dismissing. The developer can use 
    // this message to start animations.
    if (_ExtraElementsWereRemoved())
    {
        _StartElementAdditionAnimations();
    }

    // Don't use framework scroll- or visibility-related 
    // animations that might conflict with the app's logic.
    e.ensuredFocusedElementInView = true; 
}

相关主题

对于开发人员 (HTML)
响应键盘交互
触摸键盘概述
input type=text element
textarea element
Showing
Hiding
InputPane
对于开发人员 (XAML)
响应键盘交互
触摸键盘概述
TextBox class
TextBlock class
Showing
Hiding
InputPane
示例
输入:触摸键盘文本输入示例
响应屏幕键盘的示例
输入:触摸键盘示例(仅限 C#/C++)

 

 

显示:
© 2015 Microsoft