Polymer - Iron A11y Keys

The <iron-a11y-keys> element is used to process keyboard commands using cross browser interface.

The keys attribute indicates by what combination of keys the event will be triggered. It accepts modifier keys such as Shift, Control, Alt, Meta and some common keyboard keys such as a-z, 0-9, F1-F12, Page Up, Page Down, Left Arrow, Right Arrow, Home, End, Escape, Space, Tab, and Enter.

All the keys should be shortened and should be in lowercase. For example, Right Arrow is for right, Page Up is for page up, Control is for ctrl, Escape is for esc, F5 is for f5, etc.

Let's take an example to demonstrate the usage of Iron A11y Keys:

Open your command prompt and use the following code to navigate to your project folder to use the iron-a11y-keys element.

This will install the iron-a11y-keys element in bower_components folder. Next, import the iron-a11y-keys file in your index.html using the following command.

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

Example:

<!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>   

Next TopicIron Ajax

← prev next →