Polimero - Chiavi in ​​ferro A11y

Il <iron-a11y-keys> elemento viene utilizzato per elaborare i comandi della tastiera utilizzando l'interfaccia crossbrowser.

Il keysattributo indica con quale combinazione di tasti verrà attivato l'evento. Accetta tasti di modifica come Maiusc, Control, Alt, Meta e alcuni tasti comuni della tastiera come az, 0-9, F1-F12, Pagina su, Pagina giù, Freccia sinistra, Freccia destra, Home, Fine, Esc, Spazio, Tab e Invio.

Tutti i tasti dovrebbero essere accorciati e dovrebbero essere in minuscolo. Ad esempio, la freccia destra è per destra, Pagina su è per pageup, Control è per ctrl, Esc è per esc, F5 è per f5, ecc

Esempio

Per utilizzare l'elemento iron-a11y-keys, vai alla cartella del tuo progetto nel prompt dei comandi e usa il comando seguente.

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

Il comando precedente installa l'elemento iron-a11y-keys in bower_componentscartella. Successivamente, importa il file iron-a11y-keys nel tuo index.html utilizzando il seguente comando.

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

L'esempio seguente mostra l'uso dell'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>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.