Responder a las interacciones del teclado (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Diseña y crea aplicaciones con las que puedan interactuar los usuarios a través de un teclado de hardware, el teclado en pantalla o el teclado táctil.
Sugerencia La información proporcionada en este tema es específica para desarrollar aplicaciones con JavaScript.
Consulta el tema Responder a interacciones del teclado (XAML) para las aplicaciones con C++, C# o Visual Basic.
Consulta Desarrollar controles de mouse (DirectX y C++) para las aplicaciones mediante DirectX con C++.
Requisitos previos: Si acabas de empezar a desarrollar aplicaciones con JavaScript, consulta estos temas para familiarizarte con las tecnologías presentadas aquí.
Crear la primera aplicación de la Tienda Windows con JavaScript
Guía básica para crear aplicaciones de la Tienda Windows con JavaScript
Encontrarás más información sobre eventos en Inicio rápido: agregar controles HTML y controlar eventos
Funciones de la aplicación, de principio a fin:
Consulta esta funcionalidad con más detalle como parte de la serie Funciones de la aplicación, de principio a fin
Interacción del usuario, de principio a fin (HTML)
Personalización de la interacción del usuario, de principio a fin (HTML)
Directrices sobre la experiencia del usuario:
Las bibliotecas de control de la plataforma (HTML y XAML) proporcionan una experiencia de interacción del usuario de Windows completa, incluidas interacciones estándar, efectos físicos animados y comentarios visuales. Si no necesitas compatibilidad para interacción personalizada, usa estos controles integrados.
Si los controles de la plataforma no son suficientes, estas directrices para la interacción del usuario te pueden ayudar a proporcionar una experiencia de interacción atractiva y envolvente que sea coherente en todos los modos de entrada. Estas directrices se centran principalmente en la entrada táctil, pero también son adecuadas para las entradas de panel táctil, mouse, teclado y lápiz.
- Directrices para las interacciones del usuario comunes
- Directrices para zoom óptico y cambio de tamaño
- Directrices para panorámica
- Directrices para rotación
- Directrices para zoom semántico
- Directrices para información visual
Muestras: Verás esta funcionalidad en acción en nuestras muestras de aplicaciones.
Muestra de personalización de la interacción del usuario, de principio a fin
Entrada: muestra de funcionalidades del dispositivo
Entrada: muestra de teclado táctil
Muestra de respuesta a la apariencia del teclado en pantalla
Información general
La entrada de teclado es una parte importante de la experiencia de interacción del usuario global de aplicaciones. El teclado es indispensable para personas con ciertas discapacidades o para los usuarios que, simplemente, lo consideran una manera más eficaz de interactuar con una aplicación. Así, por ejemplo, los usuarios deben poder navegar por la aplicación con las teclas Tab y las flechas de dirección, activar los elementos de la interfaz de usuario con la barra espaciadora y la tecla Entrar y, asimismo, acceder a los comandos con los métodos abreviados del teclado.
Una interfaz de usuario de teclado bien diseñada es un aspecto importante de la accesibilidad del software. Permite a usuarios con dificultades visuales o con ciertas discapacidades motrices navegar por una aplicación e interactuar con sus funciones. Es posible que estos usuarios no puedan controlar un mouse y empleen varias tecnologías de ayuda, como herramientas para la mejora del teclado, teclados en pantalla, ampliadores de pantallas, lectores de pantalla y utilidades de entrada de voz.
El tipo de teclado más común es el teclado de hardware externo que se conecta físicamente al dispositivo. Además de un teclado de hardware, Windows 8 ofrece dos teclados de software:
El teclado en pantalla es un teclado de software que puedes usar en Windows en lugar del teclado físico para escribir datos con entrada táctil, el mouse, el lápiz o la pluma, u otro dispositivo señalador (no es necesaria una pantalla táctil). El teclado en pantalla se proporciona para sistemas que no incluyen un teclado físico o para usuarios cuyos problemas de movilidad les impidan usar los dispositivos de entrada físicos tradicionales. El teclado en pantalla simula la mayoría de las funciones, si no todas, de un teclado de hardware.
.png "El teclado en pantalla")
El teclado táctil es un teclado de software visual que se usa para escribir texto con entrada táctil. El teclado táctil no reemplaza al teclado en pantalla de Windows, ya que se usa únicamente para escribir texto (no simula el teclado de hardware) y solo aparece cuando se hace foco en un campo editable o en otro control de texto editable.
Nota El teclado en pantalla tiene prioridad sobre el teclado táctil, que no se mostrará si el teclado en pantalla está presente.
Estos son algunos ejemplos del teclado táctil.
Windows: diseño predeterminado:
.png "El teclado táctil en el diseño predeterminado")
Windows: diseño para pulgares (es posible que no esté disponible en todos los idiomas):
.png "El teclado táctil en el diseño para pulgares")
Windows Phone: diseño predeterminado:
.png "El teclado táctil de Windows Phone")
Eventos de teclado
Los siguientes eventos de teclado se pueden producir en teclados tanto de hardware como táctiles.
| Evento | Descripción |
|---|---|
| keydown | Ocurre cuando se presiona cualquier tecla. |
| keyup | Ocurre cuando se suelta cualquier tecla. |
| keypress | Ocurre cuando se presiona una tecla alfanumérica. |
Eventos de teclado y foco
Los controles de la interfaz de usuario generan eventos de teclado solo cuando tienen el foco de entrada. Un control individual obtiene el foco cuando el usuario hace clic o pulsa directamente sobre dicho control en el diseño o bien usa la tecla Tab para entrar en una secuencia de tabulación dentro del área de contenido.
También puedes llamar al método focus para forzar el foco. Esto solo es necesario si implementas teclas de método abreviado, porque el foco del teclado no se establece de manera predeterminada cuando se carga la interfaz de usuario. Si deseas obtener más información, consulta el ejemplo de teclas de método abreviado más adelante en este tema.
Para que un control reciba el foco de entrada, debe estar habilitado y estar visible. Este es el estado predeterminado para la mayoría de los controles. Cuando un control tiene el foco de entrada, puede generar eventos de entrada del teclado y responder a ellos, tal y como se describe más adelante en este capítulo. También puedes responder a un control que recibe o pierde el foco al controlar los eventos focus, focusin, blur y focusout.
De manera predeterminada, la secuencia de tabulación de los controles es el orden en que aparecen en el HTML. Sin embargo, puedes modificar este orden con la propiedad tabIndex. Para obtener más información, consulta Implementación de accesibilidad de teclado (HTML).
Controladores de eventos de teclado
Te recomendamos que agregues controladores de eventos mediante programación en lugar de hacerlo de manera declarativa en HTML (consulta Por qué no definir un controlador de eventos en el marcado).
Hay tres eventos de entrada directamente asociados con las interacciones del teclado: keydown, keyup y keypress.
La mayoría de los controladores de eventos toman un único argumento, un Event object que contiene información acerca del evento. Algunas de las propiedades de eventos de teclado más útiles son target, keyCode y, si se permite que los eventos se propaguen, currentTarget.
Tecla
Por lo general, los eventos de teclado se escuchan para procesar un valor de tecla específico. Para determinar qué tecla se presiona o se libera, comprueba el valor keyCode en los datos del evento. keyCode devuelve un valor Key. La enumeración Key incluye todas las teclas compatibles.
Métodos abreviados de teclado
Además de implementar la navegación por teclado y la activación para tu aplicación, una práctica recomendada es implementar métodos abreviados para la funcionalidad de la aplicación. Un método abreviado es una combinación de teclas (por lo general, una tecla de letra combinada con una tecla modificadora) que mejora la productividad al proporcionarle al usuario una forma eficaz de acceder a las funciones de la aplicación.
Una tecla de acceso es un método abreviado a un elemento de la interfaz de usuario de la aplicación. Las teclas de acceso consisten en la tecla Alt y una tecla de letra.
Una tecla de aceleración es un método abreviado a un comando de la aplicación. Tu aplicación podría tener una interfaz de usuario que corresponda exactamente al comando. Las teclas de aceleración consisten en la tecla Ctrl o Mayús (o ambas) y una tecla de letra.
El atributo x-ms-acceleratorKey te permite notificar a los lectores de pantalla y otras tecnologías de asistencia que existe una tecla de aceleración. Este atributo no proporciona el comportamiento de la tecla de aceleración. Debes proporcionar controladores de eventos de teclado, como keydown, keyup y keypress, para procesar las teclas de aceleración en tu aplicación.
Escucha y control de un evento de teclado
Aquí te mostramos cómo especificar y definir un controlador para el evento keydown.
Nota Estos ejemplos se han tomado de la muestra de interacción del usuario personalizada incluida en el tema Personalización de la interacción del usuario, de principio a fin (HTML).
Este controlador de eventos filtra todas las pulsaciones de teclas y procesa solo las teclas Flecha izquierda y Flecha derecha.
// 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);
Declara las teclas de método abreviado en marcado HTML mediante los atributos accesskey y 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>
El marco de trabajo admite las funciones de teclado para establecer el foco o invocar elementos, pero debes implementar controladores de eventos de teclado, como keydown, keyup y keypress, para procesar las teclas de aceleración de la aplicación.
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
preventDefault cancela la acción predeterminada del evento sin detener la propagación a través de Document Object Model (DOM). Usa cancelable para comprobar si el evento se puede cancelar, porque la llamada a preventDefault para un evento no cancelable no tiene efecto alguno.
stopPropagation cancela la propagación de eventos en la fase de captura o propagación de eventos. No obstante, el evento se envía a todas las escuchas de eventos del destino actual (independientemente de la captura o propagación) antes de que se detenga el flujo de eventos. Para impedir completamente que se ejecuten los controladores restantes, usa el método stopImmediatePropagation.
El teclado táctil
Los controles de entrada de texto proporcionan compatibilidad automática para el teclado táctil. Cuando el usuario establece el enfoque de entrada en un control de texto mediante entrada táctil, el teclado táctil aparece automáticamente. Cuando el enfoque de entrada no está en un control de texto, el teclado táctil se oculta.
Cuando el teclado táctil aparece, recoloca automáticamente la interfaz de usuario para asegurar que el elemento con foco permanezca visible. Esto puede hacer que otras áreas importantes de la interfaz de usuario queden fuera de la pantalla. Sin embargo, puedes deshabilitar el comportamiento predeterminado y realizar tus propios ajustes en la interfaz de usuario cuando el teclado táctil aparezca. Si deseas obtener más información, consulta Muestra de respuesta a la apariencia del teclado en pantalla.
Si creas un control personalizado que requiere entrada de texto, pero no deriva de un control de entrada de texto estándar, puedes agregar compatibilidad con el teclado táctil si implementas los modelos de control de automatización de la interfaz de usuario adecuados. Si deseas obtener más información, consulta la muestra de teclado táctil.
Al presionar las teclas en el teclado táctil se generan los eventos keydown y onkeyup, igual que cuando se presiona un teclado de hardware. Sin embargo, el teclado táctil no genera eventos de entrada para Ctrl+A, Ctrl+Z, Ctrl+X, Ctrl+C y Ctrl+V, que están reservadas para la manipulación de texto en el control de entrada.
Instrucciones de experiencia de usuario para admitir interacciones de teclado
Estas son algunas instrucciones para admitir interacciones del teclado.
General
Los usuarios deben poder realizar todas las tareas admitidas por la aplicación usando solo el teclado de hardware o el teclado en pantalla.Nota El teclado táctil se usa para la entrada de texto únicamente, no para comandos del sistema ni de la aplicación.
Cuando tu aplicación se inicie, establece el foco inicial del teclado en el elemento con el que los usuarios interactuarán primero intuitivamente (o es más probable que lo hagan). Por lo general, la ubicación más apropiada es la vista de contenido principal de la aplicación de modo que el usuario pueda desplazarse inmediatamente por el contenido con las teclas de flecha. Para obtener más información sobre cómo establecer el foco en controles específicos, consulta focus.
Asegúrate de que las teclas TAB y de dirección se muevan por el contenido en un orden lógico.
Establece el atributo tabIndex en un valor que sea igual o mayor que 0 para todos los elementos de interfaz de usuario interactivos que no se encuentren en el orden de tabulación de manera predeterminada. La configuración del atributo tabIndex es importante porque los usuarios del lector de pantalla navegan entre los elementos de interfaz de usuario interactivos mediante el uso de la tecla Tabulación.
Usa las teclas de flecha como métodos abreviados de teclado para una navegación interna apropiada entre los elementos secundarios de los elementos compuestos. Si los nodos de la vista de árbol tienen elementos secundarios separados para administrar la activación de nodos y las acciones de expandir/contraer, usa las teclas de flecha izquierda y derecha para proporcionar la funcionalidad de expandir/contraer del teclado.
Asegúrate de que cada elemento de la interfaz de usuario en el que pueda hacerse clic también pueda invocarse con el teclado.
Implementa métodos abreviados de teclado para las funciones principales de la aplicación. (Un método abreviado es una combinación de teclas que mejora la productividad al proporcionar al usuario una forma eficaz de acceder a la funcionalidad de la aplicación).
Una tecla de acceso es un método abreviado a un elemento de la interfaz de usuario de tu aplicación. Consta de la tecla Alt y una tecla de letra.
Una tecla de aceleración es un método abreviado a un comando de la aplicación. Tu aplicación puede tener una interfaz de usuario que corresponda exactamente al comando. Las teclas de aceleración consisten en la tecla Ctrl y una tecla de letra.
Debes proporcionar una forma sencilla para que los usuarios que usan lectores de pantalla y otra tecnología de asistencia puedan descubrir las teclas de método abreviado de tu aplicación. Debes declarar las teclas de método abreviado en el marcado HTML de tu aplicación mediante el uso de los atributos accessKey y -ms-AcceleratorKey, y comunicar las teclas de métodos abreviados mediante información sobre herramientas, nombres accesibles, descripciones accesibles o alguna otra forma de comunicación en pantalla. Recuerda documentar correctamente las teclas de método abreviado en el contenido de Ayuda de tu aplicación.
Para obtener más información sobre la implementación de las teclas de método abreviado, consulta Teclas de método abreviado en las instrucciones de experiencia del usuario de Windows.
No redefinas los métodos abreviados de teclado que esperan los usuarios en todas las aplicaciones de la Tienda Windows. Consulta el tema sobre los métodos abreviados de teclado para obtener una lista completa.
Hardware
Consulta las funciones del dispositivo de teclado (KeyboardCapabilities) para determinar si hay algún teclado conectado y para identificar cuáles son los aspectos de la interfaz de usuario de tu aplicación a los que el hardware del teclado puede acceder directamente. Para más información sobre cómo consultar las funciones de dispositivos, consulta el tema de inicio rápido: identificación de dispositivos de puntero.
Asocia los botones del teclado con la interfaz de usuario correspondiente (botones Atrás y Adelante) en tu aplicación.
Información visual
- Usa rectángulos de foco solamente con las interacciones del teclado. Si el usuario inicia una interacción táctil, haz que la interfaz de usuario del teclado vaya desapareciendo de forma gradual. Esto mantiene la interfaz de usuario ordenada y organizada.
- No muestres información visual si un elemento no admite interacción (por ejemplo, texto estático).
- Muestra información visual simultáneamente para todos los elementos que representan el mismo destino de entrada.
- Proporciona botones en la pantalla (como + y -) como sugerencias para simular las manipulaciones táctiles, como realizar un movimiento panorámico, girar, hacer zoom, etc.
Para obtener instrucciones más generales sobre la información visual, consulta el tema sobre las directrices para información visual.
Temas relacionados
Conceptos
Responder a la interacción del usuario
Implementación de accesibilidad de teclado