Как поймать, что ввод нажат в бумажном вводе Polymer 1.0

Как улавливать при нажатии enter в Polymer 1.0 paper-input?

Я попытался использовать on-bind-value-changed, который отображается через iron-input, но, похоже, он отличает только буквы в аргументе события, где e.detail есть null для всех других клавиш, таких как enter, tab и т.д.

Ответ 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>

Ответ 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.