Polímero - Llaves A11y de hierro

los <iron-a11y-keys> El elemento se utiliza para procesar comandos de teclado mediante la interfaz de navegador cruzado.

los keysEl atributo indica con qué combinación de teclas se activará el evento. Acepta teclas modificadoras como Shift, Control, Alt, Meta y algunas teclas comunes del teclado como az, 0-9, F1-F12, Page Up, Page Down, Flecha izquierda, Flecha derecha, Inicio, Fin, Escape, Espacio, Tab y Enter.

Todas las claves deben estar abreviadas y deben estar en minúsculas. Por ejemplo, Flecha derecha es para la derecha, Page Up es para pageup, Control es para ctrl, Escape es para esc, F5 es para f5, etc.

Ejemplo

Para usar el elemento iron-a11y-keys, navegue hasta la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.

bower install PolymerElements/iron-a11y-keys --save

El comando anterior instala el elemento iron-a11y-keys en bower_componentscarpeta. Luego, importe el archivo iron-a11y-keys en su index.html usando el siguiente comando.

<link rel = "import" href = "/bower_components/iron-a11y-keys/iron-a11y-keys.html">

El siguiente ejemplo demuestra el uso del elemento iron-a11y-keys.

<!DOCTYPE html>
<html>
   <head>
      <base href = "http://polygit.org/components/">
      <meta name = "viewport" content = "width = device-width">
      <title>iron-a11y-keys</title>
      <link rel = "import" href = "polymer/polymer.html">
      <link rel = "import" href = "iron-a11y-keys/iron-a11y-keys.html">
      <link rel = "import" href = "paper-input/paper-input.html">
   </head>
    
   <body>
      <demo-keys></demo-keys>
      <dom-module id = "demo-keys">
        
         <template>
            <iron-a11y-keys target = "[[_target]]"
               keys = "shift+enter enter esc pageup pagedown up down left right space" 
               on-keys-pressed = "_onKeyPress"></iron-a11y-keys>
             
            <h4>Press any of the below keys and check console.</h4>
            <p>shift + enter, enter, esc, pageup, pagedown, up, down, left, right,
               space.</p>
               
            <paper-input type = "text" value = "{{_value::input}}" id = "input" />
         </template>
           
         <script>
            Polymer ({
               is: 'demo-keys', properties: {
                  _value: {
                     type: String
                  },
                  _target: {
                     value: function() {
                        return this.$.input;
                     }
                  }
               },
               _onKeyPress: function(e) {
                  e.detail.keyboardEvent.preventDefault();
                  console.log(e.detail.combo);
               }         
            });
         </script>
      </dom-module>
   </body>
</html>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.

polymer serve

Ahora, abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page