Linee guida per la tastiera virtuale

Applies to Windows and Windows Phone

La tastiera virtuale consente di immettere testo nelle app di Windows Store su dispositivi che supportano il tocco e viene richiamata quando un utente tocca un campo di input modificabile. La tastiera virtuale è usata solo per l'immissione del testo e non contiene tasti di comando, come il tasto ALT o i tasti funzione.

La tastiera può essere chiusa in uno di due modi:

  • Quando si invia il modulo.
  • Viene richiamato il comando Nascondi tastiera, come mostrato di seguito.

    Il comando Nascondi tastiera sulla tastiera virtuale

La tastiera virtuale rimane in genere visibile mentre l'utente si sposta tra i controlli di un modulo. Questo comportamento può variare in base agli altri tipi di controllo all'interno del modulo.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine:  Interazione dell'utente: input tocco... e oltre.

Cosa fare e cosa non fare

  • Visualizza la tastiera virtuale solo per l'immissione di testo. Questo tipo di tastiera non offre molti degli acceleratori o dei tasti di comando disponibili su una tastiera hardware, ad esempio ALT, i tasti funzione o il tasto logo Windows.
  • Non ridefinire l'input della tastiera virtuale in comandi o scelte rapide.
  • Non permettere agli utenti di navigare all'interno dell'app usando la tastiera virtuale.

Tastiera virtuale e un'interfaccia utente personalizzata

Questi consigli sono pertinenti solo se la tua app usa controlli personalizzati. I controlli di input di testo forniti da Windows interagiscono correttamente con la tastiera virtuale per impostazione predefinita. Se stai creando un'interfaccia utente personalizzata in C#/VB/C++ e XAML, usa AutomationPeer class per accedere ai controlli di automazione dell'interfaccia utente. In Input: Esempio di tastiera virtuale puoi vedere come avviare la tastiera virtuale usando controlli personalizzati in app che usano XAML.

Se usi JavaScript e HTML, hai acesso all'automazione dell'interfaccia utente impostando le proprietà ARIA (Accessible Rich Internet Applications) per i tuoi controlli personalizzati. Vedi Mapping dei ruoli ARIA all'automazione dell'interfaccia utente per altre info.

  • Visualizza la tastiera durante tutta l'interazione con il modulo.

    Assicurati che i controlli personalizzati includano il ControlType di automazione corretto per l'interfaccia utente per mantenere attiva la tastiera quando lo stato attivo viene spostato da un campo di input a un altro durante l'immissione di testo. Se ad esempio in uno scenario di immissione di testo viene aperto un menu e vuoi che mantenere attiva la tastiera, devi specificare il ControlType Menu per il menu. Per le app che usano C#/VB/C++ e XAML, vedi AutomationControlType enumeration. Per JavaScript e HTML, imposta il ruolo ARIA sul tipo di controllo appropriato.

  • Assicurati che gli utenti possano sempre visualizzare il campo di input in cui digitano i dati.

    La tastiera virtuale occupa la metà dello schermo. Le app di Windows Store offrono un'esperienza predefinita per la gestione dell'interfaccia utente alla visualizzazione della tastiera virtuale, garantendo lo scorrimento nella visualizzazione del campo di input con lo stato attivo. Quando personalizzi l'interfaccia utente, gestisci gli eventi Showing e Hiding esposti dall'oggetto InputPane per personalizzare la reazione dell'app alla comparsa della tastiera.

  • Non modificare le proprietà di automazione dell'interfaccia utente per controllare la tastiera virtuale. Altri strumenti di accessibilità si basano sulla precisione delle proprietà di automazione dell'interfaccia utente.

  • Implementa le proprietà di automazione dell'interfaccia utente per i controlli personalizzati che supportano l'input di testo. Per rendere la tastiera persistente nel contesto quando lo stato attivo viene spostato sui diversi controlli, un controllo personalizzato deve includere una delle proprietà seguenti:

    • Pulsante
    • Casella di controllo
    • Casella combinata
    • Pulsante di opzione
    • Barra di scorrimento
    • Elemento di albero
    • Menu
    • Voce di menu

    Per le app che usano C#/VB/C++ e XAML, vedi AutomationControlType enumeration. Per JavaScript e HTML, imposta il ruolo ARIA sul tipo di controllo appropriato.

Istruzioni aggiuntive per l'uso

Gestione degli eventi Showing e Hiding

Ecco un esempio di come associare gestori degli eventi showing e hiding della tastiera virtuale.



<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; 
}

Argomenti correlati

Per sviluppatori (HTML)
Risposta alle interazioni tramite tastiera
Panoramica sulla tastiera virtuale
input type=text element
textarea element
Showing
Hiding
InputPane
Per sviluppatori (XAML)
Risposta alle interazioni tramite tastiera
Panoramica sulla tastiera virtuale
TextBox class
TextBlock class
Showing
Hiding
InputPane
Esempi
Input: Esempio di input di testo tramite tastiera virtuale
Esempio di risposta alla tastiera su schermo
Input: Esempio di tastiera virtuale (solo C#/C++)

 

 

Mostra:
© 2015 Microsoft