Idioma: HTML | XAML

Respondendo a interações por teclado (HTML)

Applies to Windows and Windows Phone

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.

Crie o seu primeiro aplicativo da Windows Store que usa JavaScript

Mapa para aplicativos da Windows Store que usam JavaScript

Saiba mais sobre os 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ário visual. 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.

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 poder navegar em seu aplicativo usando Tab e as teclas de seta, ativar os elementos da interface do usuário usando a barra de espaço e Enter, e acessar os comandos usando 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.

    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.
    • Applies to Windows

    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:  

    O teclado de toque em layout padrão

    Windows - layout de toque (pode não estar disponível em todos os idiomas):  

    O teclado de toque em layout em miniatura

    Windows Phone - layout padrão:  

    Teclado de toque do Windows Phone

Eventos de teclado

Os seguintes eventos podem ocorrer para teclados físicos e sensíveis ao toque.

EventoDescriçã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 de 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 chamarpreventDefaultpara um evento não cancelável​nã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 de 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. As 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. Veja 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 se um elemento não der suporte à interação (por exemplo, texto estático).
  • Exiba comentários visuais simultaneamente para todos os elementos que representarem 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
Exibindo e editando texto

 

 

Mostrar:
© 2014 Microsoft