Easily Catch Enter to Submit Form

Question

Is there an easy way to enable hitting enter to execute some javascript for a form with paper-input's. I can catch the keystroke on enter for every element but this seems kind of tedious.

Answer 1

With the current Polymer version 1.0 I was able to resolve that using iron-a11y-keys.

Here is an example bound to the whole form which triggers submission on any child input element:

<iron-a11y-keys id="a11y" target="[[_form]]" keys="enter"
                  on-keys-pressed="submitForm"></iron-a11y-keys>
  <form is="iron-form" id="form"
        method="post"
        action="{{url}}">

...

Polymer({
  is: 'example-form',
  properties: {
    _form: {
      type: Object,
      value: function() {
        return this.$.form;
      }
    }
  },
  submitForm: function() {
    document.getElementById('form').submit();
  },

Answer 2

Currently (Polymer 0.3.4) there seems to be no event fired when one presses the enter key in a paper-input. But you can extend the paper-input element and add this functionality (see Extending other elements in the Polymer doc):

<polymer-element name="my-paper-input" extends="paper-input">
  <template>
    <shadow></shadow>
  </template>
  ...
</polymer-element>

Then you can fire a custom event when the return key is pressed:

ready: function() {
  self = this;
  this.$.input.addEventListener('keypress', function(e) {
    if (e.keyCode == 13) {
      self.async(function() {
        self.fire('enter', self.value);
      });
    }
  });
}

For convenience the input value is passed to the event handler. Now you can use your new element like so:

<my-paper-input ... on-enter="{{inputEntered}}"></my-paper-input>

Edit 1:

Since the event bubbles up in the element hierarchy, one can catch it on the surrounding form element:

<my-form on-enter="{{anyInputEntered}}" ...>

Then one gets the events of all input elements in one place (the event propagation can be stopped by calling stopPropagation(); on the event object).

Edit 2:

It's best to give custom events unique names, so that they don't clash with the names of core events that may be added in the future (e.g. my-unique-prefix-input-entered).