Guidelines for touch keyboard

Applies to Windows and Windows Phone

The touch keyboard enables text entry for Windows Store apps on devices that support touch and don’t have a built-in or peripheral keyboard. The touch keyboard is invoked when a user taps on an editable input field, and is dismissed when the input field loses focus. The touch keyboard is used for text entry only and doesn't contain command keys, such as the alt or function keys.

Image of a touch keyboard

See this feature in action as part of our App features, start to finish series:  User interaction: Touch input... and beyond.

Dos and don'ts

  • Display the touch keyboard for text input only. Note that the touch keyboard doesn't provide many of the accelerators or command keys found on a hardware keyboard, such as alt, the function keys, or the Windows Logo key.
  • Don't redefine input from the touch keyboard into commands or shortcuts.
  • Don't make users navigate the app using the touch keyboard.

Touch keyboard and a custom UI

These recommendations are only relevant if your app uses custom controls. Text input controls provided by Windows properly interact with the touch keyboard by default. If you're creating a custom UI using C#/VB/C++ and XAML, use the AutomationPeer class to access UI Automation controls. The Input: Touch keyboard sample shows how to launch the touch keyboard using custom controls in apps using XAML.

If you're using JavaScript and HTML, you'll have to access UI Automation by setting the Accessible Rich Internet Applications (ARIA) properties for your custom controls. See Mapping ARIA roles to UI Automation for more info.

  • Display the keyboard throughout the entire interaction with your form.

    Ensure that your custom controls have the proper UI Automation ControlType to ensure keyboard persistence when focus moves from a text input field while in the context of text entry. For example, if you have a menu that's opened in the middle of a text-entry scenario, and you want the keyboard to persist, the menu must have the ControlType Menu. For apps using C#/VB/C++ and XAML, see AutomationControlType enumeration. For JavaScript and HTML, set the ARIA role to the appropriate control type.

  • Ensure that users can always see the input field that they're typing into.

    The touch keyboard occludes half of the screen. Windows Store apps provide a default experience for managing UI when the touch keyboard appears, by ensuring that the input field with focus scrolls into view. When customizing your UI, handle the Showing and Hiding events exposed by the InputPane object to customize your app’s reaction to the keyboard’s appearance.

  • Don't manipulate UI Automation properties to control the touch keyboard. Other accessibility tools rely on the accuracy of UI Automation properties.

  • Implement UI Automation properties for custom controls that have text input. For the keyboard to persist contextually as focus changes to different controls, a custom control must have one of the following properties:

    • Button
    • Check box
    • Combo box
    • Radio button
    • Scroll bar
    • Tree item
    • Menu
    • Menu item

    For apps using C#/VB/C++ and XAML, see AutomationControlType enumeration. For JavaScript and HTML, set the ARIA role to the appropriate control type.

Additional usage guidance

Handling the Showing and Hiding events

Here's an example of attaching event handlers for the showing and hiding events of the touch keyboard.



public class MyApplication
{
    public MyApplication()
    {
        // Grab the input pane for the main application window and attach
        // touch keyboard event handlers.
        Windows.Foundation.Application.InputPane.GetForCurrentView().Showing  
            += new EventHandler(_OnInputPaneShowing);
        Windows.Foundation.Application.InputPane.GetForCurrentView().Hiding 
            += new EventHandler(_OnInputPaneHiding);
    }

    private void _OnInputPaneShowing(object sender, IInputPaneVisibilityEventArgs eventArgs)
    {
        // If the size of this window is going to be too small, the app uses 
        // the Showing event to begin some element removal animations.
        if (eventArgs.OccludedRect.Top < 400)
        {
            _StartElementRemovalAnimations();

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

    private void _OnInputPaneHiding(object sender, IInputPaneVisibilityEventArgs eventArgs)
    {
        if (_ResetToDefaultElements())
        {
            eventArgs.EnsuredFocusedElementInView = true; 
        }
    }

    private void _StartElementRemovalAnimations()
    {
        // This function starts the process of removing elements 
        // and starting the animation.
    }

    private void _ResetToDefaultElements()
    {
        // This function resets the window's elements to their default state.
    }
}


Related topics

For developers (HTML)
Responding to keyboard interactions
Overview of the touch keyboard
input type=text element
textarea element
Showing
Hiding
InputPane
For developers (XAML)
Responding to keyboard interactions
Overview of the touch keyboard
TextBox class
TextBlock class
Showing
Hiding
InputPane
Samples
Input: Touch keyboard text input sample
Responding to the on-screen keyboard sample
Input: Touch keyboard sample (C#/C++ only)

 

 

Show:
© 2014 Microsoft