Polymère - Clés A11y en fer

le <iron-a11y-keys> L'élément est utilisé pour traiter les commandes clavier à l'aide de l'interface crossbrowser.

le keysL'attribut indique par quelle combinaison de touches l'événement sera déclenché. Il accepte les touches de modification telles que Shift, Control, Alt, Meta et certaines touches de clavier courantes telles que az, 0-9, F1-F12, Page précédente, Page suivante, Flèche gauche, Flèche droite, Début, Fin, Échap, Espace, Tab et Entrée.

Toutes les clés doivent être raccourcies et doivent être en minuscules. Par exemple, la flèche vers la droite est pour la droite, la page vers le haut pour la mise en page, le contrôle pour ctrl, Echap pour esc, F5 pour f5, etc.

Exemple

Pour utiliser l'élément iron-a11y-keys, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

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

La commande ci-dessus installe l'élément iron-a11y-keys dans bower_componentsdossier. Ensuite, importez le fichier iron-a11y-keys dans votre index.html à l'aide de la commande suivante.

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

L'exemple suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.

polymer serve

Maintenant, ouvrez le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.

↰ Previous page

Polymère - Clés A11y en fer

Exemple

Production

Tutoriel Polymer