Easy to catch. Enter to submit the form.

Question

Is there an easy way to enable hit enter to execute some javascript for the paper input form. I can catch a keystroke for input for each item, but that seems tedious.

Answer 1

With the current version of Polymer version 1.0, I was able to solve using iron-a11y-keys .

Here is an example related to the entire form that launches the view 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), it seems that there is no event when one presses the enter key in paper input. But you can expand the paper input element and add this functionality (see Extending Other Elements in a Polymer Document):

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

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

 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 as follows:

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

Change 1:

Since the event bubbles in the hierarchy of elements, it can be caught in the surrounding form element:

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

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

Edit 2:

It is best to provide unique names for custom events so that they do not interfere with the names of major events that may be added in the future (for example, my-unique-prefix-input-entered ).