轻松抓住Enter提交表格

Question

是否有一种简单的方法来启用命令输入执行一些带有纸张输入的表单的javascript.我可以捕捉每个元素的键击,但这似乎有点单调乏味.

Answer 1

使用当前的Polymer版本1.0,我能够使用iron-a11y-keys解决这个问题.

下面是一个绑定到整个表单的示例,它触发任何子输入元素的提交:

<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

目前(Polymer 0.3.4)当在纸张输入中按下回车键时似乎没有事件被触发.但是您可以扩展paper-input元素并添加此功能(请参阅在Polymer文档中扩展其他元素):

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

然后,您可以在按下返回键时触发自定义事件:

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

为方便起见,输入值将传递给事件处理程序.现在您可以像这样使用新元素:

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

编辑1:

由于事件在元素层次结构中冒泡,因此可以在周围的表单元素上捕获它:

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

然后在一个地方获取所有输入元素的事件(可以通过调用stopPropagation();事件对象来停止事件传播).

编辑2:

最好为自定义事件提供唯一的名称,以便它们不会与将来可能添加的核心事件的名称冲突(例如my-unique-prefix-input-entered).