当焦点在纸张输入时,使用回车提交铁形式不起作用

时间:2017-07-20 22:03:25

标签: polymer

考虑以下观点:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <h1>View One</h1>

      <iron-form id="loginForm">
          <form action="/" method="POST">
              <label>From here it works:</label>
              <input type="text" id="name" name="user_name">
              <paper-input id="uid" label="Username" type="text" required auto-validate></paper-input>
              <paper-input id="pwd" label="Password" type="password" required auto-validate></paper-input>
              <button type="submit" class="no-style">Submit</button>
          </form>
      </iron-form>
    </div>
  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

当焦点位于<input>时,按Enter键将提交表单。当焦点位于<paper-input>时,它不会。

以前在聚合物1中工作正常。

有什么变化吗?

感谢。

1 个答案:

答案 0 :(得分:2)

与此同时,虽然修复了此特定于浏览器的错误,但您可以添加onkeyup事件并调用在用户点击输入时发送表单的方法。

<paper-input on-keyup="postForm" label="username" value="{{username::input}}">

该功能应该看起来像....

postform: function(event) {
  var enter = 13;

  if (event.keyCode === enter) {
    // code to post form
  }
}