ポリマー-鉄A11yキー

*<iron-a11y-keys>* 要素は、クロスブラウザインターフェイスを使用してキーボードコマンドを処理するために使用されます。

*keys* 属性は、イベントがトリガーされるキーの組み合わせを示します。 Shift、Control、Alt、Metaなどの修飾キーと、az、0-9、F1-F12、Page Up、Page Down、左矢印、右矢印、Home、End、Escape、Spaceなどの一般的なキーボードキーを受け入れます。 Tab、Enter。

すべてのキーを短くして、小文字にする必要があります。たとえば、右矢印は右、Page Upはページアップ、Controlはctrl、Escapeはesc、F5はf5などです。

例

iron-a11y-keys要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。

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

上記のコマンドは、 bower_components フォルダーにiron-a11y-keys要素をインストールします。次に、次のコマンドを使用して、indexlにiron-a11y-keysファイルをインポートします。

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

次の例は、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/polymerl">
      <link rel = "import" href = "iron-a11y-keys/iron-a11y-keysl">
      <link rel = "import" href = "paper-input/paper-inputl">
   </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>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここで、ブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

鉄a11yキー

Polymer-iron-a11y-keys

ポリマー-鉄A11yキー

例

出力