Respondendo a interações por teclado (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Crie e construa aplicativos que os usuários possam interagir por meio de teclado de hardware, teclado virtual ou teclado de toque.
Dica A informação neste tópico é específica para o desenvolvimento de aplicativos em JavaScript.
Veja Respondendo a interações do teclado (XAML) para aplicativos que usam C++, C# ou Visual Basic.
Veja Desenvolvendo controles do mouse (DirectX e C++) para aplicativos em DirectX com C++.
Pré-requisitos: Se você for iniciante no desenvolvimento de aplicativos em JavaScript, consulte esses tópicos para ficar familiarizado com as tecnologias discutidas aqui.
Criar seu primeiro aplicativo da Windows Store em JavaScript
Mapa para os aplicativos da Windows Store usando JavaScript
Saiba mais sobre eventos com Guia de início rápido: adicionando controles HTML e manipulando eventos
Recursos de aplicativos, do início ao fim:
Explore esse recurso mais profundamente como parte da nossa série sobre recursos para aplicativos, do início ao fim
Interação do usuário, do início ao fim (HTML)
Personalização da interação do usuário, do início ao fim (HTML)
Diretrizes de experiência do usuário:
As bibliotecas de controle de plataforma (HTML e XAML) fornecem a experiência de total interação do usuário do Windows, incluindo interações padrão, efeitos físicos animados e comentários visuais. Se não precisar de suporte para interação personalizada, use esses controles internos.
Se os controles de plataforma não forem suficientes, as diretrizes a seguir para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada. Essas diretrizes têm como foco principal a entrada por toque, mas elas ainda são relevantes para entrada por touchpad, mouse, teclado e de caneta.
- Diretrizes para interações comuns do usuário
- Diretrizes de zoom óptico e redimensionamento
- Diretrizes de movimento panorâmico
- Diretrizes de rotação
- Diretrizes do Zoom Semântico
- Diretrizes de comentário visual
Exemplos: Veja essa funcionalidade em ação em nossos exemplos de aplicativos.
Exemplo completo de personalização de interação do usuário
Entrada: amostra de recursos de dispositivo
Entrada: amostra de teclado virtual
Respondendo ao aparecimento da amostra de teclado na tela
Visão geral
A entrada por teclado é uma parte importante da experiência geral da interação do usuário de um aplicativo. O teclado é indispensável para pessoas portadoras de determinadas deficiências ou usuários que simplesmente o consideram um método mais eficiente de interagir com um aplicativo. Por exemplo, os usuários devem ser capazes de navegar pelo seu aplicativo usando as teclas Tab e de direção, de ativar elementos da interface do usuário ao usar as teclas Barra de Espaços e Enter, e acessar comandos ao usar atalhos de teclado.
Uma interface de usuário do teclado bem projetada é um aspecto importante da acessibilidade do software. Ela permite que os usuários com deficiência visual ou que possuam determinadas deficiências motoras naveguem em um aplicativo e a interagir com seus recursos. Esses usuários talvez não consigam usar um mouse e, em vez disso, usem diversas tecnologias assistenciais, como ferramentas avançadas de teclado, teclados virtuais, ampliadores de tela, leitores de tela e utilitários de entrada de voz.
O tipo mais comum de teclado é o externo, ou seja, um teclado de hardware fisicamente conectado a um dispositivo. Além de um teclado de hardware, o Windows 8 fornece dois teclados de software:
O teclado virtual é um teclado de software que você pode usar no Windows em vez do teclado físico para digitar e entrar dados usando toque, mouse, caneta ou outro dispositivo apontador (uma tela sensível ao toque não é necessária). O teclado virtual é fornecido para sistemas que não têm um teclado físico ou para usuários cujos problemas de mobilidade impedem o uso de dispositivos de entrada físicos tradicionais. O teclado virtual emula a maior parte, se não toda a funcionalidades de um teclado de hardware.
.png "O teclado virtual")
O teclado de toque é um teclado de software visual usado para entrada de texto por toque. O teclado de toque não é uma substituição ao teclado virtual no Windows, pois é usado apenas para entrada de texto (ele não emula o teclado de hardware) e só aparece quando um campo de texto ou outro controle de texto editável é focalizado.
Observação O Teclado Virtual tem prioridade sobre o teclado de toque, que não será mostrado se o Teclado Virtual estiver presente.
Veja aqui exemplos do teclado de toque.
Windows - layout padrão:
.png "O teclado de toque em layout padrão")
Windows - layout de toque (pode não estar disponível em todos os idiomas):
.png "O teclado de toque em layout em miniatura")
Windows Phone - layout padrão:
.png "Teclado de toque do Windows Phone")
Eventos de teclado
Os seguintes eventos podem ocorrer para teclados físicos e sensíveis ao toque.
| Evento | Descrição |
|---|---|
| keydown | Ocorre quando uma tecla é pressionada. |
| keyup | Ocorre quando uma tecla é liberada. |
| keypress | Ocorre quando uma tecla alfanumérica é pressionada. |
Foco e eventos do teclado
Os controles em sua interface do usuário geram eventos de teclado apenas quando possuem foco de entrada. Um controle individual ganha foco quando o usuário clica ou toca diretamente nesse controle no layout, ou utiliza a tecla Tab para avançar na sequência de tabulação dentro da área de conteúdo.
Você também pode chamar o método focus para forçar o foco. Isso é necessário quando você implementa teclas de atalho, pois o foco do teclado não é definido por padrão quando a sua interface do usuário é carregada. Para obter mais informações, consulte Exemplos de tecla de atalho posteriormente neste tópico.
Para um controle receber o foco de entrada, ele deve estar ativado e visível. Esse é o estado padrão da maioria dos controles. Quando um controle tem um foco de entrada, ele pode acionar e responder a eventos de entrada de teclado conforme descrito posteriormente neste tópico. Você pode também responder a um controle que está recebendo ou perdendo o foco ao manipular os eventos focus, focusin, blur e focusout.
Por padrão, a sequência de tabulação de controles é a ordem em que eles aparecem no HTML. No entanto, é possível modificar essa ordem ao usar a propriedade de tabIndex. Para obter mais informações, veja Implementando acessibilidade de teclado (HTML).
Manipuladores de eventos do teclado
Recomendamos que você adicione manipuladores de eventos por meio de programação em vez de declarativamente em HTML (veja Por que você não deve definir um manipulador de eventos na marcação).
Há três eventos de entrada associados diretamente a interações de teclado: keydown, keyup e keypress.
A maioria dos manipuladores de eventos aceita um único argumento: um objeto Event object que contém informações sobre o evento. Algumas das propriedades de evento de teclado mais úteis incluem target, keyCode , se os eventos forem autorizados a acontecer, currentTarget.
Chave
Normalmente, você escuta eventos de teclado para processar um valor de chave específico. Para determinar qual tecla é pressionada ou liberada, verifique o valor de keyCode nos dados do evento. keyCode retorna um valor Key. A enumeração Key inclui todas as teclas suportadas.
Atalhos do teclado
Além de implementar a navegação pelo teclado e ativação para o seu aplicativo, é recomendável implementar atalhos para a funcionalidade do seu aplicativo. Um atalho é uma combinação de teclado (normalmente uma tecla de letra combinada com uma tecla modificadora) que aumenta a produtividade, proporcionando uma maneira eficiente para o usuário acessar a funcionalidade do aplicativo.
Uma tecla de acesso é um atalho para uma parte da interface do usuário em seu aplicativo. As teclas de acesso consistem na tecla Alt e em uma tecla de letra.
Uma tecla aceleradora é um atalho para um comando do aplicativo. Seu aplicativo pode ter uma interface do usuário que corresponde exatamente ao comando. As teclas de aceleração consistem nas teclas Ctrl e/ou Shift e uma tecla de letra.
O atributo x-ms-acceleratorKey possibilita que você notifique os leitores de tela e outras tecnologias assistenciais de que a tecla aceleradora existe. Esse atributo não fornece o comportamento da tecla aceleradora. Você deve fornecer manipuladores de eventos de teclado, como keydown, keyup e keypress, para processar as teclas de aceleração em seu aplicativo.
Escutar e manipular um evento de teclado
Aqui, vamos mostrar como especificar e definir um manipulador para o evento keydown.
Observação Estes exemplos foram tirados do Exemplo de interação personalizada do usuário que suporta o tópico Exemplo completo de personalização de interação do usuário (HTML).
Esse manipulador de eventos filtra todas as teclas pressionadas e processa somente as teclas de Seta para a esquerda e Seta para a direita.
// 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);
Declare suas teclas de atalho na marcação HTML usando os atributos 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>
A estrutura suporta a funcionalidade do teclado para ajustar o foco ou invocar elementos, mas você deve implementar manipuladores de eventos de teclado, como keydown, keyup e keypress, para processar as teclas de atalho em seu aplicativo.
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.
}
});
Modificadores de eventos
O preventDefaultcancela a ação padrão do evento sem parar a propagação por meio do DOM (Document Object Model). Use cancelable para verificar se o evento é cancelável, pois chamarpreventDefault para um evento não cancelávelnão funciona.
O stopPropagation cancela propagação de eventos na fase de captura de evento ou propagação. No entanto, o evento expede para todos os ouvintes do evento sobre o alvo atual (independentemente de capturar ou propagar) antes de o fluxo de eventos parar. Para evitar completamente que manipuladores restantes sejam executados, use o métodostopImmediatePropagation.
O teclado virtual
Os controles de entrada de texto oferecem suporte automático para o teclado virtual. Quando o usuário define o foco de entrada como um controle de texto usando a entrada por toque, o teclado virtual aparece automaticamente. Quando o foco de entrada não está em um controle de texto, o teclado virtual é ocultado.
Quando o teclado virtual aparece, ele reposiciona automaticamente sua interface de usuário para garantir que elemento focado permaneça visível. Isso pode fazer com que outras áreas importantes de sua interface de usuário se movam para fora da tela. No entanto, você pode desabilitar o comportamento padrão e fazer seus próprios ajustes de interface de usuário quando o teclado virtual aparece. Para saber mais, veja Respondendo ao aparecimento da amostra de teclado na tela.
Se você criar um controle personalizado que exige entrada de texto, mas não deriva de um controle de entrada de texto padrão, será possível adicionar suporte de teclado virtual implementando os padrões corretos de controle de Automação da Interface do Usuário. Para saber mais, veja a amostra do teclado virtual.
O pressionamento das teclas no teclado virtual aciona os eventos keydown e onkeyup assim como o pressionamento das teclas no teclado físico. No entanto, o teclado virtual não acionará eventos de entrada para Ctrl+A, Ctrl+Z, Ctrl+X, Ctrl+C e Ctrl+V, os quais são reservados para a manipulação de texto no controle de entrada.
Diretrizes da experiência do usuário para dar suporte a interações do teclado
Veja a seguir algumas diretrizes para dar suporte a interações via teclado.
Geral
Os usuários devem conseguir realizar todas as tarefas com suporte em seu aplicativo usando somente o teclado físico ou o Teclado Virtual.Observação O teclado de toque é usado somente para entrada de texto, e não para comandos de aplicativo ou do sistema.
Quando o aplicativo é iniciado, defina o foco de teclado inicial no elemento com o qual os usuários intuitivamente (ou mais provavelmente) vão interagir primeiro. Normalmente, o local mais apropriado é o modo de exibição de conteúdo principal do aplicativo para que um usuário possa rolar imediatamente o conteúdo usando as teclas de seta. Para saber mais sobre como definir o foco para controles específicos, veja focus.
Verifique se as teclas Tab e de orientação se movem pelo conteúdo em uma ordem lógica.
Defina o atributo tabIndex com um valor superior ou igual a 0 para todos os elementos interativos da interface do usuário que não estejam na ordem de tabulação por padrão. É importante definir o atributo tabIndex porque os usuários de leitores de tela navegam entre os elementos interativos da interface do usuário usando a tecla Tab.
Use as teclas de seta como atalhos de teclado para permitir uma navegação interna adequada entre elementos filho de elementos compostos. Se os nós de exibição de árvore tiverem elementos filho separados para lidar com expansão e recolhimento e ativação de nós, use as teclas de seta para esquerda e direita para obter a funcionalidade de expansão e recolhimento.
Permita que cada elemento da interface do usuário que pode ser clicado também possa ser chamado com o teclado.
Implemente os atalhos de teclado para a funcionalidade principal do aplicativo. (Um atalho é uma combinação de teclas que aumenta a produtividade, fornecendo uma maneira eficiente para o usuário acessar a funcionalidade do aplicativo.)
Uma tecla de acesso é um atalho para um elemento da interface do usuário em seu aplicativo. Ela consiste na tecla Alt e em uma tecla de letra.
Uma tecla aceleradora é um atalho para um comando do aplicativo. O aplicativo pode ter uma interface do usuário que corresponde exatamente ao comando. Teclas aceleradoras consistem na tecla Ctrl e em uma tecla de letra.
Você precisa oferecer aos usuários que dependem de leitores de tela e outras tecnologias auxiliares uma maneira fácil de descobrir atalhos de teclado em seu aplicativo. Declare atalhos de teclado na marcação HTML de seu aplicativo usando os atributos accessKey e -ms-AcceleratorKey, e comunique os atalhos usando dicas de ferramenta, nomes acessíveis, descrições acessíveis ou outras formas de comunicação na tela. Lembre-se de documentar bem as teclas de atalhos no conteúdo de ajuda do seu aplicativo.
Para obter as diretrizes sobre como implementar atalhos de teclado, veja Teclas de atalho nas Diretrizes de experiência do usuário do Windows.
Não redefina os atalhos de teclado padrão que são esperados em cada aplicativo da Windows Store. Consulte Atalhos de teclado para obter uma lista abrangente.
Hardware
Consulte os recursos do dispositivo de teclado (KeyboardCapabilities) para determinar se um teclado está conectado e para identificar os aspectos da interface do usuário do aplicativo que o hardware de teclado pode acessar diretamente. Para saber mais sobre como consultar os recursos do dispositivo, veja Guia de início rápido: identificando dispositivos de ponteiro.
Associe botões de teclado à interface do usuário adequada (botões Voltar e Avançar) no seu aplicativo.
Comentário visual
- Use retângulos de foco somente com interações de teclado. Se o usuário iniciar uma interação por toque, faça com que a interface do usuário de teclado desapareça gradualmente. Dessa forma, a interface do usuário fica mais organizada.
- Não exiba comentários visuais quando o elemento não permite manipulação (como texto estático).
- Exiba comentários visuais simultaneamente para todos os elementos que representam o mesmo destino de entrada.
- Forneça botões virtuais (por exemplo, + e -) como dicas para emulação de manipulações baseadas em toque, ou seja, movimento panorâmico, rotação, zoom etc.
Para obter diretrizes mais gerais sobre comentário visual, veja Diretrizes para comentário visual.
Tópicos relacionados
Conceitual
Respondendo à interação do usuário
Implementando acessibilidade pelo teclado
Início rápido: adicionando controles HTML e manipulando eventos