Polymer 1.0 如何在耦合的纸张输入容器收到回车键时调用纸张图标按钮的点击

Question

我在纸质图标按钮旁边有一个纸质输入容器，当用户在输入时点击回车键时，我想触发连接到纸质图标按钮点击处理程序的相同功能有焦点...任何人都知道如何做到这一点。

<dom-module is="keypress-test">
<template>
<paper-input-container id="input">
     <label>Enter Should Trigger</label>
     <input is="iron-input"></input>
</paper-input-container>
<paper-input label="Enter Won't Trigger"></paper-input>
<paper-button on-tap="_test()"></paper-button>
</template>
</dom-module>

<script>
Polymer({
      is: "keypress-test",
      ready: function(){
      },
      _test: function(){
           console.log("Button Clicked")
      }
 })
 </script>

Answer 1

使用 iron-a11y-keys 监听回车键

<dom-module is="keypress-test">
<template>
<iron-a11y-keys target="[[_target]]" keys="enter" on-keys-pressed="_test"></iron-a11y-keys>
<paper-input-container id="input">
     <label>Enter Will Trigger</label>
     <input is="iron-input"></input>
</paper-input-container>
<paper-input label="Enter Won't Trigger"></paper-input>
</template>
</dom-module>

<script>
Polymer({
      is: "keypress-test",
      ready: function(){
           this.set('_target', this.$.input)
      },
      _test: function(){
           console.log("Enter pressed")
      }
 })
 </script>

Polymer 1.0 如何在耦合的纸张输入容器收到回车键时调用纸张图标按钮的点击

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key

event-handling

web-component

polymer