Android – HTML Input: force numeric keyboard by default but allow letters

androidcordovahtmlinputkeyboard

I have an HTML input. The input is on the web page which is opened in Chrome on an Android phone.

I want an option to let the user to see a numeric keyboard when he starts entering the value. But at the same moment, I want him to have a possibility to enter alphanumeric characters.

  • I cannot use type="number" because it doesn't allow entering letters.

  • I cannot use type="text" because it opens alpha keyboard by default and a user have to switch to numeric keyboard.

So the option I'm trying to find is when the standard alpha-numeric keyboard got opened but the digits input is already selected (Like when you press ?123 on the standard keyboard).

I have tried to use type="tel" but I don't understand how to switch to letters from numbers.

I'm using Cordova, so if there's no option to do this using HTML I could use native plugins if you suggest me any of them.


I use cordova so if there's no HTML way to do things I'm ready to integrate any sort of plugin, if you could suggest me anyone.


TL;DR: This is what I want to see as a default keyboard layout. Is it possible?

enter image description here

Best Solution

You probably want to take a look at this: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">

The inputmode will work on the latest Android browsers, and the pattern is a hack for iOS. Pay special attention to the article where they talk about iOS not allowing the user to change keyboards.

Hope it helps.