我如何捕捉到在 Polymer 1.0 纸张输入中按下输入

Question

在 Polymer 1.0 paper-input 中按下 enter 时如何捕获？

我尝试使用通过 iron-input 公开的 on-bind-value-changed，但它似乎只与事件参数中的字母有所区别，其中 e.detail 是 null所有其他键，例如 enter、tab 等

Answer 1

我会将 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>

Answer 2

另一种可能性是使用 iron-a11y-keys。这样，您可以声明性地定义当焦点位于 paper-input 元素上时用户按下 enter 键时发生的情况。

示例（从聚合物目录中复制）：

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

我如何捕捉到在 Polymer 1.0 纸张输入中按下输入

How do I catch that enter is pressed in Polymer 1.0 paper-input

polymer