Question

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

我尝试使用通过on-bind-value-changed公开的iron-input，但似乎只能区分事件参数中的字母e.detail null所有其他字母键，例如输入， 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。这样，您可以声明性地定义当用户按下enter键时发生的事情，而焦点位于paper-input元素上。

示例（从Polymer目录中复制）：

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

之后，您必须将target元素的a11y属性绑定到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纸张输入中按下该输入

2 个答案: