为什么在按Enter键进入Chrome时我的表单未提交?

时间:2016-03-21 18:19:15

标签: javascript forms polymer form-submit keypress

在Chrome中按Enter键时,我的使用paper-input字段的表单无法提交。但是当按下Enter键进入所有其他浏览器时它会提交。以下是相关代码:

<form [ngFormModel]="loginForm">
    <paper-input type="text"
                 ngControl="username"
                 label="Username"
                 auto-validate
                 pattern="{{usernameValidation.get()}}"
                 maxlength="20"
                 error-message="Alphanumeric and underscore characters only. [1-20]"
                 ngDefaultControl>
        <iron-icon suffix icon="account-circle"></iron-icon>
    </paper-input>

    <paper-input type="password"
                 ngControl="password"
                 label="Password"
                 auto-validate
                 pattern="{{passwordValidation.get()}}"
                 maxlength="60"
                 error-message="Long passwords only. [8-60]"
                 ngDefaultControl>
        <iron-icon suffix icon="fingerprint"></iron-icon>
    </paper-input>

    <paper-input type="submit"
                 value="Log In"
                 (click)="submit()"
                 [disabled]="!loginForm.valid || loading"
                 ngDefaultControl>
    </paper-input>
</form>

我尝试使用submit()ngSubmit函数调用移动到表单元素,并尝试在表单中添加隐藏的标准提交输入,以欺骗Chrome提交,但没有运气。我还尝试使用标准input元素和button。这里有任何意见。谢谢!

如果有人想解释投票,我很乐意修改我的问题。

1 个答案:

答案 0 :(得分:1)

一种选择是使用Polymer的a11y-keys元素。你可以这样做:

<iron-a11y-keys  keys="enter" on-keys-pressed="submitForm" id="a11y"></iron-a11y-keys>

这将触发您在元素中定义的“submitForm”方法。以下是a11y-keys元素的文档:https://elements.polymer-project.org/elements/iron-a11y-keys