CODEWITHSUNDEEP
javascriptformspolymerform-submitkeypress
Sloth Armstrong
Sloth Armstrong

Reputation: 1066

Why does my form not submit when pressing enter in Chrome?

My form which uses paper-input fields does not submit when pressing the enter key in chrome. It does submit when pressing enter in all other browsers however. Here is the relevant code:

<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>

I have tried moving the submit() function call to the form element using ngSubmit and have tried adding a hidden, standard submit input in the form to trick Chrome into submitting but have had no luck. I also tried using a standard input element as well as a button. Any input would be appreciated here. Thanks!

If someone wants to explain the down-vote I'd be happy to modify my question.

Upvotes: 0

Views: 206

Answers (1)

Eddie
Eddie

Reputation: 21

One option is to use the a11y-keys element from Polymer. You can do something like this:

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

That will fire the "submitForm" method you've defined in your element. Here are the docs for the a11y-keys element: https://elements.polymer-project.org/elements/iron-a11y-keys

Upvotes: 1

Related Questions