samedi 20 juin 2020

HTML mobile web input with enterkeyhint not focuing on next input if type is text

I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form. The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text. This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.

Example:

    <form (submit)="submitForm()">
        <div>
            <label>Name</label>
            <input type="text" enterkeyhint="next" inputmode="text" />
        </div>
        <div>
            <label>Email</label>
            <input type="email" inputmode="email" enterkeyhint="next" />
        </div>
        <div>
            <label>Comments</label>
            <input type="text" />
        </div>
    </form>
  • Focusing on Name input, the Next button doesn't do anything.
  • Focusing on Email input, it navigates to any next input (Comments)

Now, if I change the type=email for type=text it doesn't navigate to the next input.

Similar behavior happens for type=tel. It does navigate to the next input of the form.

Am I missing something to make this work?

Thanks




Aucun commentaire:

Enregistrer un commentaire