轻松输入以提交表单答案

【问题标题】：Easily Catch Enter to Submit Form轻松输入以提交表单
【发布时间】：2017-11-10 21:05:22
【问题描述】：

是否有一种简单的方法可以让按回车键为带有纸张输入的表单执行一些 javascript。我可以在输入时捕捉每个元素的击键，但这似乎有点乏味。

【问题讨论】：

【解决方案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();
  },

【讨论】：

【解决方案2】：

目前（Polymer 0.3.4）在paper-input 中按下回车键时似乎没有触发任何事件。但是您可以扩展 paper-input 元素并添加此功能（请参阅 Polymer 文档中的 Extending other elements）：

<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）。

【讨论】：

这就是我试图避免的，不得不将 on-enter="{{inputEntered}}" 放在 html 中的一堆元素上。我试图看看是否有一些东西可以覆盖表单中的所有元素。不过感谢您的建议:-)
您可以在元素层次结构中的任何位置捕获事件。例如，将事件处理程序放在您周围的表单元素上。然后，您可以在一个地方从所有输入中获取事件。分发事件的另一种方式是core-signals。这些事件可以在您的应用程序中的任何位置接收（尽管我不建议在这种情况下使用它）。