鐵形式不提交輸入紙張輸入

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(); 
}