铁形式不提交输入纸张输入

Question

我测试了使用iron-form自定义元素。我遇到的问题是当我按下回车键时表单没有被提交。例如这种形式在这里工作在输入：

<iron-form> 
     <form id="loginForm"> 
     <paper-card heading="Welcome Back!" elevation="1" animated-shadow="true"> 
      <div class="card-content"> 
       <input type="text" label="Username" value="{{username}}"> 
       <input type="text" label="Password" value="{{password}}"> 
      </div> 
      <div class="card-actions"> 
       <button disabled$="[[fetching]]" type="submit">Login</button> 
      </div> 
     </paper-card> 
     </form> 
    </iron-form> 

我有一个事件监听器在我connectedCallback方法监听iron-form-presubmit event

 connectedCallback() { 
      super.connectedCallback(); 

      this.addEventListener('iron-form-presubmit', function(event) { 
      event.preventDefault(); 
      alert('working') 
      }); 
     } 

的问题是，当我切换HTML输入元素纸 - 输入元素表单不再提交输入。

<iron-form> 
     <form id="loginForm"> 
     <paper-card heading="Welcome Back!" elevation="1" animated-shadow="true"> 
      <div class="card-content"> 
       <paper-input type="text" label="Username" value="{{username}}"></paper-input> 
       <paper-input type="text" label="Password" value="{{password}}"></paper-input> 
      </div> 
      <div class="card-actions"> 
       <button disabled$="[[fetching]]" type="submit">Login</button> 
      </div> 
     </paper-card> 
     </form> 
    </iron-form> 

Answer 1

您可以使用<iron-a11y-keys>打电话按下[enter]键时，提交方法。

<iron-a11y-keys target="loginForm" keys="enter" on-keys-pressed="submit"></iron-a11y-keys> 
<iron-form id="loginForm"> 
... 
</iron-form> 

在您的自定义元素定义，添加一个方法：

submit: function() { 
    this.$.loginForm.submit(); 
}