How can I allow users to enter "." in an iOS numeric keyboard with <input>?

Question

I have read this post:

https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

It says I can use the following code to allow users to enter numbers with a number-only virtual keyboard, which is quite convenient than the traditional virtual keyboard:

<label for="creditcard">credit card number:</label> <input pattern="[0-9]*" type="text" name="creditcard">

However, there is no way to enter dot here. For instance, if I want to enter 5.6 or 6.0, I got stuck there.

Is there any way I can do this?

Answer 1

I hope you are doing well and safe from COVID-19.

<input type="tel" inputmode='decimal'/>

I’ve been using input type = tel it accepts pattern parameters and pulls up the number keyboard inputs on mobile. The keyboard on mobile for type=”tel” has some phone-specific characters like #, but its not a bad solution until support for inputmode is better, even if it feels semantically wrong. It doesn’t seem to affect screenreaders in a negative way. Thanks.

Answer 2

replace

<input type="number" inputmode='numeric"/>

by

<input type="number" inputmode='decimal'/>