铁制表格未提交输入纸质输入

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

铁制表格未提交输入纸质输入

Iron form not submitting on enter with paper input

web-component

polymer

iron-form