Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

 

Puedes usar manejadores de evento de teclado para responder al teclado. Sin embargo, sería tedioso hacer eso para cada botón y elemento de menú.

Creación de un atajo de teclado

XUL provee métodos en los cuales puede definir atajos de teclado. Ya vimos en la sección de menús que podemos definir un atributo llamado accesskey que específica la tecla que un usuario debe presionar para activar el menú o un elemento del mismo. En el ejemplo que está debajo, el menú Archivo puede ser seleccionado presionando 'Alt' y 'F' (o cualquier otra combinación de teclas para una plataforma específica). Una vez que el menú Archivo está abierto, el menú Cerrar puede ser seleccionado presionando la tecla C.

Ejemplo 1: Código Ver en funcionamiento

<menubar id="sample-menubar">
  <menu id="file-menu" label="Archivo" accesskey="f">
    <menupopup id="file-popup">
      <menuitem id="close-command" label="Cerrar" accesskey="c"/>
    </menupopup>
  </menu>
</menubar>

Tambié puede usar el atributo accesskey en botones. Cuando la tecla es presionada en este caso, el botón es seleccionado.

Quizás quiera configurar atajos de teclado más generales. Por ejemplo, presionar Control+C para copiar texto al porta papeles. Aunque a veces atajos como estos no siempre son válidos, usualmente funcionarán cada vez que la ventana esté abierta. Usualmente, un atajo del teclado estará permitido en cualquier momento y puede ver ver si deberí estar haciendo algo con algún programa. Por ejemplo, copiar texto al portapapeles sólo debería funcionar cuando hay algún texto seleccionado.

El elemento 'key'

XUL provee de un elemento, key, que permite definir atajos de teclado para una ventana. Tiene atributos para especificar la tecla que debería ser presionada y qué teclas modificadoras (tales como Shift o Control) necesitan ser presionadas simultáneamente. A continuación se muestra un ejemplo:

<keyset>
  <key id="sample-key" modifiers="shift" key="R"/>
</keyset>

En este ejemplo se define un atajo de teclado que es activado cuando el usuario presiona las teclas 'Shift' y 'R' simultáneamente. El atributo key (tiene el mismo nombre que el elemento) se emplea para indicar qué tecla debe apretarse, en este caso la 'R'. Se puede asignar cualquier caracter (de teclado) a este atributo para requerir que se apriete una tecla en particular. Los modificadores que deben apretarse se indican con el atributo modifiers. Se pueden establecer varios, (ej: modifiers="control alt") asignando como valor una lista separada con espacios de teclas de modificadoras; se listan a continuación:

alt 
El usuario debe pulsar la tecla Alt. En Macintosh, es la tecla Option.
control 
El usuario debe pulsar la tecla Control.
meta 
El usuario debe pulsar la tecla Meta. En Macintosh, es la tecla Command.
shift 
El usuario debe pulsar la tecla Mayúsculas.
accel 
El usuario debe pulsar la tecla especial acelerador. La tecla usada por los atajos de teclado en la plataforma del usuario. Habitualmente, éste debería ser el valor que utilizases.

Tu teclado no tendrá necesariamente todas las teclas, en cuyo caso serán mapeadas a las teclas modificadoras que tengas.

El elemento key debe colocarse dentro de un elemento keyset; en caso contrario no funcionará. Este elemento esta diseñado para contener un conjunto de elementos key, lo cual sirve para agrupar todas las definiciones de teclas en un solo sitio en cada archivo. Cualquier elemento key fuera de un keyset no funcionará.
 

Cada plataforma generalmente utiliza una tecla diferente para los atajos de teclado. Por ejemplo, Windows usa la tecla Control y Macintosh usa la tecla Command. Sería conveniente definir elementos key por separado para cada plataforma. Afortunadamente, hay una solución. El modificador accel hace referencia a la tecla usada para atajos de teclado específica de cada plataforma. Funciona igual que otros modificadores, pero no será la misma en todas las plataformas.

Algunos ejemplos adicionales:

<keyset>
  <key id="copy-key" modifiers="control" key="C"/>
  <key id="explore-key" modifiers="control alt" key="E"/>
  <key id="paste-key" modifiers="accel" key="V"/>
</keyset>

El atributo código de tecla (keycode)

El atributo key se utiliza para especificar la tecla que debe ser pulsada. Sin embargo, habrá casos en los que quieras referirte a teclas que no pueden ser especificadas con un caracter (como la tecla Enter o las teclas de función F1..F12). El atributo key sólo puede ser utilizado para caracteres imprimibles. Otro atributo, keycode puede ser utilizado para caracteres no imprimibles.

El atributo keycode debería ser establecido a un código especial que represente la tecla que quieres. A continuación hay una lista de teclas. No todas las teclas están disponibles en todos los teclados.

VK_CANCEL VK_BACK VK_TAB VK_CLEAR
VK_RETURN VK_ENTER VK_SHIFT VK_CONTROL
VK_ALT VK_PAUSE VK_CAPS_LOCK VK_ESCAPE
VK_SPACE VK_PAGE_UP VK_PAGE_DOWN VK_END
VK_HOME VK_LEFT VK_UP VK_RIGHT
VK_DOWN VK_PRINTSCREEN VK_INSERT VK_DELETE
VK_0 VK_1 VK_2 VK_3
VK_4 VK_5 VK_6 VK_7
VK_8 VK_9 VK_SEMICOLON VK_EQUALS
VK_A VK_B VK_C VK_D
VK_E VK_F VK_G VK_H
VK_I VK_J VK_K VK_L
VK_M VK_N VK_O VK_P
VK_Q VK_R VK_S VK_T
VK_U VK_V VK_W VK_X
VK_Y VK_Z VK_NUMPAD0 VK_NUMPAD1
VK_NUMPAD2 VK_NUMPAD3 VK_NUMPAD4 VK_NUMPAD5
VK_NUMPAD6 VK_NUMPAD7 VK_NUMPAD8 VK_NUMPAD9
VK_MULTIPLY VK_ADD VK_SEPARATOR VK_SUBTRACT
VK_DECIMAL VK_DIVIDE VK_F1 VK_F2
VK_F3 VK_F4 VK_F5 VK_F6
VK_F7 VK_F8 VK_F9 VK_F10
VK_F11 VK_F12 VK_F13 VK_F14
VK_F15 VK_F16 VK_F17 VK_F18
VK_F19 VK_F20 VK_F21 VK_F22
VK_F23 VK_F24 VK_NUM_LOCK VK_SCROLL_LOCK
VK_COMMA VK_PERIOD VK_SLASH VK_BACK_QUOTE
VK_OPEN_BRACKET VK_BACK_SLASH VK_CLOSE_BRACKET VK_QUOTE
VK_HELP      

Por ejemplo, para crear un atajo con las teclas 'Alt y F5':

<keyset>
  <key id="test-key" modifiers="alt" keycode="VK_F5"/>
</keyset>

El siguiente ejemplo muestra algunos atajos de teclado más:

<keyset>
  <key id="copy-key" modifiers="accel" key="C"/>
  <key id="find-key" keycode="VK_F3"/>
  <key id="switch-key" modifiers="control alt" key="1"/>
</keyset>

La primera tecla es invocada cuando el usuario pulsa su atajo específico de la plataforma y C. El segundo es invocado cuando el usuario pulsa F3. El tercero es invocado al pulsar las teclas Control, Alt y 1 a la vez. Si quieres distinguir entre teclas de la parte principal del teclado y el teclado numérico, utiliza las teclas VK_NUMPAD (como VK_NUMPAD1).

Consulta la Mozilla Keyboard Planning FAQ and Cross Reference para más información sobre selección atajos de teclado para usar en aplicaciones.

Usando los atajos de teclado

Ahora que sabemos cómo definir atajos de teclado, veremos cómo podemos usarlos. Hay dos formas. La primera es la más simple y sólo requiere que utilices el manejador de evento keypress en el elemento key. Cuando el usuario pulsa la tecla, el script será invocado. A continuación se muestra un ejemplo:

<keyset>
  <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/>
</keyset>

La función DoCopy será llamada cuando el usuario presione las teclas especificadas en el elemento key, que en este ejemplo, son las teclas para copiar al portapapeles (como Control+C). Esto funcionará mientras la ventana esté abierta. La función DoCopy debería comprobar si hay texto seleccionado y en ese caso copiarlo al portapapeles. Nota que las cajas de texto tienen los atajos del portapapeles ya incluidos, por lo que no tienes que implementarlos por ti mismo.

Asignación de un atajo de teclado a un menú

Si estás asignando un atajo de teclado que ejecuta a un comando que ya existe en un menú, puedes asociar el elemento key directamente con el comando del menú. Para hacer esto, añade un atributo key al menuitem. Establece su valor al id de la tecla que quieras usar. El siguiente ejemplo muestra esto.

Ejemplo 2: Código Ver en funcionamiento

Image:keyshort1.jpg
<keyset>
  <key id="paste-key" modifiers="accel" key="V"
          oncommand="alert('Paste invoked')"/>
</keyset>

<menubar id="sample-menubar">
  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem id="paste-command" 
         accesskey="p" key="paste-key" 
         label="Paste" oncommand="alert('Paste invoked')"/>
    </menupopup>
  </menu>
</menubar>

El atributo key del elemento menuitem, cuyo valor aquí es paste-key es igual al valor del atributo id de la tecla definida. Puedes usar esto para teclas adicionales así como para definir atajos de teclado para cualquier número de elementos.

También verás que se ha añadido un texto junto a la opción "Paste" para indicar que el comando de menú puede ser invocado mediante Control + V. Esto se realiza automáticamente basándose en los modificadores del elemento key. Los atajos de teclado asociados a los menús funcionarán aunque el menú no esté abierto.

Una característica adicional de las definiciones de teclas es que las puedes desactivar fácilmente. Par hacer esto, añade un atributo disabled al elemento <code>key y establece su valor a true. Esto desactiva el atajo de teclado para que no pueda ser invocado. Es útil cambiar el atributo disabled utilizando un script.

Nuestro ejemplo

Vamos a añadir atajos de teclado al diálogo encontrar archivos. Añadiremos cuatro, para los comandos Cortar (Cut), Copiar (Copy) y Pegar (Paste) y otro para el comando Cerrar (Close) cuando el usuario pulse Escape.

  <keyset>   <key id="cut_cmd" modifiers="accel" key="X"/>   <key id="copy_cmd" modifiers="accel" key="C"/>   <key id="paste_cmd" modifiers="accel" key="V"/>   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>  </keyset> 

<vbox flex="1">
 <toolbox>
  <menubar id="findfiles-menubar">
   <menu id="file-menu" label="File" accesskey="f">
     <menupopup id="file-popup">
       <menuitem label="Open Search..." accesskey="o"/>
       <menuitem label="Save Search..." accesskey="s"/>
       <menuseparator/>
       <menuitem label="Close" accesskey="c" key="close_cmd"
         oncommand="window.close();"/>
     </menupopup>
   </menu>
   <menu id="edit-menu" label="Edit" accesskey="e">
     <menupopup id="edit-popup">
       <menuitem label="Cut" accesskey="t" key="cut_cmd"/>
       <menuitem label="Copy" accesskey="c" key="copy_cmd"/>
       <menuitem label="Paste" accesskey="p" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>
  </menubar>
 </toolbox>
</vbox>

Ahora podemos usar esos atajos para activar los comandos. Por supuesto, los comandos del portapapeles no harán nada porque no hemos escrito esos scripts.

Los eventos de tecla

Hay tres eventos de teclado que pueden ser utilizados si las funcionalidades descritas antes no estuvieran disponibles. Estos eventos son:

keypress 
Llamado cuando una tecla es pulsada y despulsada mientras un elemento tiene el foco. Puedes usar esta tecla para comprobar los caracteres permitidos en un campo.
keydown 
Llamado cuando una tecla es pulsada (aunque todavía no se haya despulsado) mientras un elemento tiene el foco.
keyup 
Llamado cuando una tecla es despulsada mientras un elemento tiene el foco.

Los eventos de tecla son sólo enviados al elemento que tiene el foco. Típicamente, esto incluye cajas de texto, botones, checkboxes y elementos así. Si no hay ningún elemento focalizado, el evento de la tecla será dirigido al propio documento XUL. En este caso, puedes añadir un escuchador de eventos (event listener) a la etiqueta window. Aunque normalmente, si quieres responder a teclas globalmente, utilizarás un atajo de teclado como se ha descrito antes.

El objeto evento de tecla tiene dos propiedades que registran la tecla que ha sido pulsada. La propiedad keyCode registra el código de la tecla y puede ser comparada con una de las constantes de la anterior tabla de esta sección. La propiedad charCode es utilizada para caracteres imprimibles y registrará el código de caracter de la tecla que fue pulsada.

Seguimos con poner un gestor de foco y selección.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: jigs12, fresno, RickieesES, ibnkhaldun, Mgjbot, Another sam, Markens, Debianpc, Nathymig
 Última actualización por: jigs12,