Risposta alle interazioni tramite tastiera (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Progetta e crea app con cui gli utenti possono interagire tramite la tastiera hardware, quella su schermo o la tastiera virtuale.

Suggerimento Le informazioni in questo argomento sono specifiche per lo sviluppo di app con JavaScript.

Per informazioni sulle app che usano C++, C# o Visual Basic, vedi Risposta alle interazioni con tastiera (XAML).

Per informazioni sulle app che usano DirectX in C++, vedi Sviluppo di controlli per il mouse (DirectX e C++).

Prerequisiti: Se non hai familiarità con lo sviluppo di app mediante JavaScript, puoi leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.

Creare la prima app di Windows Store in JavaScript

Roadmap per app di Windows Store scritte in JavaScript

Informazioni sugli eventi sono disponibili in Guida introduttiva: Aggiunta di controlli HTML e gestione degli eventi

Funzionalità delle app dall'inizio alla fine:

Per conoscere meglio questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app dall'inizio alla fine

Interazioni con l'utente, dall'inizio alla fine (HTML)

Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (HTML)

Linee guida per l'esperienza utente:

Le raccolte di controlli della piattaforma (HTML e XAML) forniscono l'esperienza di interazione utente Windows completa, oltre a interazioni standard, effetti fisici animati e feedback visivo. Se non hai l'esigenza di supportare interazioni personalizzate, usa questi controlli predefiniti.

Se i controlli della piattaforma non sono sufficienti, queste linee guida ti aiuteranno a offrire un'esperienza di interazione coinvolgente e Immersive coerente tra le diverse modalità di input. Queste linee guida sono incentrate principalmente sull'input tocco, ma sono rilevanti anche per input di tipo tocco, mouse, tastiera e stilo.

Esempi: Per esaminare questa funzionalità in azione, vedi gli esempi di app.

Personalizzazione delle interazioni con l'utente, dall'inizio alla fine

Input: Esempio delle funzionalità del dispositivo

Input: Esempio di tastiera virtuale

Esempio di risposta alla visualizzazione della tastiera su schermo.

Panoramica

L'input da tastiera è una parte importante dell'esperienza di interazione utente complessiva per le app. La tastiera è indispensabile per le persone con determinate disabilità o per gli utenti che semplicemente la considerano un modo più efficiente di interagire con un'app. Ad esempio, gli utenti devono essere in grado di navigare nell'app tramite i tasti di direzione e Tab, attivare gli elementi dell'interfaccia utente tramite la barra spaziatrice e Invio e accedere ai comandi usando i tasti di scelta rapida.

Un'interfaccia utente di tastiera ben progettata è un aspetto importante dell'accessibilità del software. Consente agli utenti con problemi di vista o con determinate disabilità motorie di esplorare un'app e interagire con le sue funzionalità. Questi utenti potrebbero non essere in grado di manovrare un mouse e fare affidamento su diversi strumenti di Assistive Technology, ad esempio strumenti per il miglioramento della tastiera, tastiere su schermo, strumenti per l'ingrandimento o per la lettura dello schermo e per utilità per l'input vocale.

Il tipo di tastiera più diffuso è la tastiera hardware esterna collegata fisicamente a un dispositivo. Oltre a una tastiera hardware, Windows 8 offre due tastiere software:

La tastiera su schermo è una tastiera software utilizzabile in Windows al posto di quella fisica per digitare e immettere dati utilizzando il tocco, il mouse, la penna/stilo o un altro dispositivo di puntamento (non è necessario un touchscreen). Tastiera su schermo è destinata ai sistemi privi di una tastiera fisica o agli utenti che a causa di problemi di mobilità non possono usare i tradizionali dispositivi di input fisici. Tastiera su schermo emula la maggior parte delle funzionalità, se non tutte, di una tastiera hardware.
La tastiera virtuale è una tastiera software visiva utilizzata per immettere testo tramite l'input tocco. La tastiera virtuale non sostituisce la tastiera su schermo in Windows, poiché può essere usata solo per l'immissione di testo e non emula la tastiera hardware. Viene inoltre visualizzata solo quando un campo di testo o un altro controllo di testo modificabile è attivo.

Nota Tastiera su schermo ha priorità rispetto alla tastiera virtuale. Quest'ultima non viene infatti visualizzata se è presente la prima.

Ecco alcuni esempi di tastiera virtuale.

Windows - layout predefinito:

![Tastiera virtuale: layout predefinito](images/Hh700405.touch_keyboard_standard(it-it,WIN.10).png "Tastiera virtuale: layout predefinito")

Windows - layout per scrittura con pollici (potrebbe non essere disponibile in tutte le lingue):

![Tastiera virtuale: layout di scrittura con pollici](images/Hh700405.touch_keyboard_thumb(it-it,WIN.10).png "Tastiera virtuale: layout di scrittura con pollici")

Windows Phone - layout predefinito:

![Tastiera virtuale di Windows Phone](images/Hh700405.touch_keyboard_phone_standard(it-it,WIN.10).png "Tastiera virtuale di Windows Phone")

Eventi della tastiera

Gli eventi della tastiera seguenti possono verificarsi per tastiere hardware e virtuali.

Evento	Descrizione
keydown	Si verifica quando viene premuto un tasto.
keyup	Si verifica quando viene rilasciato un tasto.
keypress	Si verifica quando viene premuto un tasto alfanumerico.

Eventi della tastiera e stato attivo

I controlli dell'interfaccia utente generano eventi della tastiera solo quando hanno lo stato attivo per l'input. Un singolo controllo acquisisce lo stato attivo quando l'utente tocca o fa clic direttamente sul controllo nel layout oppure usa il tasto Tab per avviare una sequenza di tabulazione nell'area di contenuto.

Puoi anche chiamare il metodo focus per forzare lo stato attivo. Si tratta di un'azione necessaria quando implementi i tasti di scelta rapida, perché lo stato attivo della tastiera non è configurato per impostazione predefinita al caricamento dell'interfaccia utente. Per altre informazioni, vedi Esempi di tasti di scelta rapida più avanti in questo argomento.

Per acquisire lo stato attivo per l'input, un controllo deve essere abilitato e visibile. È lo stato predefinito per la maggior parte dei controlli. Quando un controllo ha lo stato attivo per l'input, può generare e rispondere a eventi di input della tastiera, come descritto più avanti in questo argomento. Puoi anche rispondere a un controllo che riceve o perde lo stato attivo gestendo gli eventi focus, focusin, blur e focusout.

Per impostazione predefinita, la sequenza di tabulazione dei controlli è l'ordine in cui appaiono in HTML. È tuttavia possibile modificare l'ordine usando la proprietà tabIndex. Per altre informazioni, vedi Implementazione dell'accessibilità tramite tastiera (HTML).

Gestori di eventi della tastiera

È consigliabile aggiungere i gestori eventi a livello di programmazione anziché in modo dichiarativo in HTML (vedi Perché non si deve impostare un gestore di eventi nel markup).

Gli eventi di input associati direttamente alle interazioni da tastiera sono tre: keydown, keyup e keypress.

La maggior parte dei gestori eventi accetta un solo argomento, un oggetto Event object che contiene informazioni sull'evento. Alcune delle proprietà evento della tastiera più utili includono target, keyCode e, se il bubbling degli eventi è consentito, currentTarget.

Tasto

In genere, si rimane in ascolto degli eventi della tastiera per elaborare un valore di tasto specifico. Per determinare il tasto premuto o rilasciato, devi verificare il valore di keyCode nei dati dell'evento. keyCode restituisce un valore Key. L'enumerazione Key include tutti i tasti supportati.

Tasti di scelta rapida

Oltre a implementare capacità di spostamento e attivazione da tastiera per l'app, è consigliabile implementare tasti di scelta rapida per le sue funzionalità. I tasti di scelta rapida sono combinazioni di tasti, in genere un tasto di lettera e un tasto di modifica, che permettono di migliorare la produttività offrendo agli utenti un modo efficiente per accedere alle funzionalità dell'app.

I tasti di accesso sono tasti di scelta rapida per accedere a un elemento dell'interfaccia utente dell'app. I tasti di accesso sono costituiti dal tasto ALT e dal tasto di una lettera.

Esistono anche tasti di scelta rapida per i comandi dell'app. La tua app può includere o meno un elemento dell'interfaccia utente che corrisponde esattamente al comando. Questo tipo di tasti di scelta rapida è costituito da CTRL e/o MAIUSC e dal tasto di una lettera.

L'attributo x-ms-acceleratorKey permette di notificare a utilità per la lettura dello schermo e altri strumenti di Assistive Technology che esiste un tasto di scelta rapida. Questo attributo non fornisce il comportamento del tasto di scelta rapida. Per elaborare tasti di scelta rapida nell'app, devi fornire gestori di eventi della tastiera, come keydown, keyup e keypress.

Ascolto e gestione di un evento della tastiera

Ecco come specificare e definire un gestore per l'evento keydown.

Nota Questi esempi sono tratti dall'esempio di interazioni personalizzate con l'utente a supporto dell'argomento Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (HTML).

Questo gestore eventi filtra tutte le pressioni di tasti ed elabora solo i tasti Freccia sinistra e Freccia destra.

// 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);

Puoi dichiarare i tasti di scelta rapida nel markup HTML usando gli attributi accesskey e x-ms-acceleratorkey.

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

Il framework supporta la funzionalità della tastiera per l'impostazione dello stato attivo o la richiamata di elementi, ma devi implementare i gestori eventi della tastiera, ad esempio keydown, keyup e keypress, per elaborare i tasti di scelta rapida nell'app.

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

Modificatori di eventi

preventDefault annulla l'azione predefinita dell'evento, senza interrompere la propagazione in DOM (Document Object Model). Usa cancelable per verificare se un documento è annullabile, perché la chiamata di preventDefault per un evento non annullabile non avrà alcun effetto.

stopPropagation annulla la propagazione di un evento nella fase di acquisizione o di bubbling degli eventi. L'evento viene tuttavia inviato a tutti i listener di eventi nella destinazione attuale, indipendentemente dall'acquisizione o dal bubbling, prima dell'interruzione del flusso di eventi. Per impedire completamente l'esecuzione di eventuali gestori rimanenti, usa invece il metodo stopImmediatePropagation.

Tastiera virtuale

I controlli di input di testo offrono il supporto automatico per la tastiera virtuale. Quando l'utente imposta lo stato attivo per l'input su un controllo di testo usando l'input tocco, la tastiera virtuale viene automaticamente visualizzata. Quando lo stato attivo per l'input non si trova in un controllo di testo, la tastiera virtuale viene nascosta.

Quando viene visualizzata la tastiera virtuale, l'interfaccia utente viene automaticamente riposizionata per garantire che l'elemento con lo stato attivo rimanga visibile. Ciò può causare la rimozione dalla schermo di altre aree importanti dell'interfaccia utente. Puoi tuttavia disabilitare il comportamento predefinito e apportare modifiche personalizzate all'interfaccia utente quando viene visualizzata la tastiera virtuale. Per altre informazioni, vedi Esempio di risposta alla visualizzazione della tastiera su schermo.

Se crei un controllo personalizzato che richiede l'input di testo, ma non deriva da un controllo di input di testo standard, puoi aggiungere il supporto della tastiera virtuale implementando i pattern corretti di controllo di automazione dell'interfaccia utente. Per altre informazioni, vedi l'esempio di tastiera virtuale.

Le pressioni dei tasti sulla tastiera virtuale generano eventi keydown e onkeyup come avviene quando si premono i tasti delle tastiere hardware. La tastiera virtuale, tuttavia, non genera eventi per CTRL+A, CTRL+Z, CTRL+X, CTRL+C e CTRL+V, che sono riservati alla modifica del testo nel controllo di input.

Linee guida per supportare le interazioni tramite tastiera nell'interfaccia utente

Ecco alcune linee guida per il supporto delle interazioni tramite tastiera.

Informazioni generali

Gli utenti devono poter eseguire tutte le attività supportate dall'app usando esclusivamente la tastiera hardware o la tastiera su schermo.Nota La tastiera virtuale viene usata solo per l'input di testo, non per comandi di sistema o dell'app.
All'avvio dell'app imposta lo stato attivo iniziale della tastiera sull'elemento con cui gli utenti interagiranno per primo, intuitivamente o con maggiore probabilità. La posizione più adatta è in genere la visualizzazione principale del contenuto dell'app in modo che l'utente possa scorrere subito il contenuto con i tasti freccia. Per altre informazioni sull'impostazione dello stato attivo su controlli specifici, vedi focus.
Assicurati che lo spostamento tra i contenuti mediante i tasti TAB e di direzione segua un ordine logico.
Imposta l'attributo tabIndex su un valore maggiore o uguale a 0 per tutti gli elementi di interfaccia utente interattivi che non sono inclusi nell'ordine di tabulazione per impostazione predefinita. L'impostazione dell'attributo tabIndex è importante perché gli utenti di utilità per la lettura dello schermo si spostano tra gli elementi interattivi dell'interfaccia utente mediante il tasto TAB.
Usa i tasti freccia come tasti di scelta rapida per il corretto spostamento interno tra gli elementi figlio di elementi compositi. Se i nodi della visualizzazione ad albero presentano elementi figlio distinti per la gestione di eventi di espansione-compressione e di attivazione del nodo, usa i tasti di direzione sinistro e destro per offrire funzionalità di espansione-compressione da tastiera.
Accertati che ogni elemento dell'interfaccia utente su cui si può fare clic possa anche essere richiamato con la tastiera.
Implementa tasti di scelta rapida per le principali funzionalità dell'app. I tasti di scelta rapida sono combinazioni di tasti che consentono di migliorare la produttività offrendo agli utenti un modo efficiente per accedere alle funzionalità dell'app.

I tasti di accesso sono tasti di scelta rapida per accedere a elementi dell'interfaccia utente dell'app. I tasti di scelta costituiti dal tasto ALT più il tasto di una lettera.

Esistono anche tasti di scelta rapida per i comandi dell'app. La tua app può includere interfaccia utente corrispondente esattamente al comando. Questo tipo di tasti di scelta rapida è costituito dal tasto CTRL e dal tasto di una lettera.

Devi offrire agli utenti che si avvalgono di utilità per la lettura dello schermo e di altri tipi di Assistive Technology, un modo semplice per trovare i tasti di scelta rapida dell'app. Dichiara i tasti di scelta rapida nel markup HTML dell'app mediante gli attributi accessKey e -ms-AcceleratorKey. Comunica quindi questi tasti con descrizioni comandi, nomi e descrizioni accessibili o altre forme di comunicazione su schermo. Ricorda di documentare esaurientemente i tasti di scelta rapida nei contenuti della Guida dell'app.

Per altre indicazioni sull'implementazione dei tasti di scelta rapida, vedi la sezione relativa ai tasti di scelta rapida nelle Linee guida per l'interazione con l'esperienza utente di Windows.

Non ridefinire in tutte le app di Windows Store i tasti di scelta rapida che gli utenti si aspettano. Per un elenco completo, vediTasti di scelta rapida.

Hardware

Esegui una query sulle funzionalità della tastiera (KeyboardCapabilities) per stabilire se è collegata e individuare a quali aspetti dell'interfaccia utente della tua app la tastiera hardware ha accesso diretto. Per altre informazioni sull'esecuzione di query relative alle funzionalità dei dispositivi, vedi Guida introduttiva: Identificazione dei dispositivi di puntamento.

Associa correttamente i pulsanti della tastiera all'interfaccia utente della tua app (pulsanti Indietro e Avanti).

Feedback visivo

Usa i rettangoli di selezione solo con le interazioni tramite tastiera. Se l'utente avvia un'interazione tramite tocco, imposta la dissolvenza graduale degli elementi di interfaccia utente della tastiera. In questo modo manterrai pulita e sgombra l'interfaccia utente.
Se un elemento non supporta l'interazione, come nel caso del testo statico, non fornire feedback visivo.
Implementa una risposta visiva simultanea per tutti gli elementi che rappresentano la stessa destinazione dell'input.
Implementa pulsanti su schermo (ad esempio + e -) come suggerimenti per emulare le manipolazioni basate sul tocco, come panoramica, rotazione, zoom e così via.

Per altre informazioni generali sul feedback visivo, vedi Linee guida per il feedback visivo.

Argomenti correlati

Informazioni concettuali

Risposta alle interazioni degli utenti

Implementare l'accessibilità da tastiera

Guida introduttiva: Aggiunta di controlli HTML e gestione di eventi

Visualizzazione e modifica di testo

Condividi tramite