web-dev-qa-db-ja.com

Enterキーが押されていることを確認するにはどうすればよいですかPolymer 1.0 paper-input

いつキャッチするのですか enter Polymer 1.0 paper-input？

on-bind-value-changedを介して公開されるiron-inputで試しましたが、他のすべてのキーでe.detailがnullであるイベント引数の文字とのみ区別されるようです、といった enter、 tab、など。

polymer
13
Franz Thomsen

keydownイベントを関数を呼び出す入力にバインドします。そこで、どのキーが押されたかを確認できます。例えば：

<dom-module id="test-element">
    <template>
        <!-- add keydown listener to paper input -->
        <paper-input label="Input label" on-keydown="checkForEnter"></paper-input>
    </template>
    <script>
        Polymer({
            is: "test-element",
            checkForEnter: function (e) {
                // check if 'enter' was pressed
                if (e.keyCode === 13) {
                    // enter pressed!
                }
            }
        });
    </script>
</dom-module>
22
Ben Thomas

もう1つの可能性は、iron-a11y-keysを使用することです。そうすれば、ユーザーがpaper-input要素にフォーカスを置いているときにenterキーを押したときに何が起こるかを宣言的に定義できます。

例（Polymer Catalog）からコピー）：

<iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
                on-keys-pressed="onEnter"></iron-a11y-keys>
<paper-input id="input" placeholder="Type something. Press enter. Check console." value="{{userInput::input}}"></paper-input>

その後、次のように、a11y要素のtargetプロパティをpaper-input要素にバインドする必要があります。

...
properties: {
  userInput: {
    type: String,
    notify: true,
  },
  target: {
    type: Object,
    value: function() {
      return this.$.input;
    }
  },
},
onEnter: function() {
  console.log(this.userInput);
}
...

お役に立てば幸いです。詳細については、 iron-a11y-keys を参照してください。

12
Christof