如何在Polymer 1.0纸张输入中按下该输入

Question

如何enter在Polymer 1.0中按下时怎么抓paper-input？

我试图与on-bind-value-changed正在通过的暴露iron-input,但它似乎只与事件的说法,其中的字母区分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.这样,您可以声明性地定义当用户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.