Input type number alternative

<input type="number"> can be awkward for various reasons.

My designer mostly dislike the small arrows on the right, I believe they are here for accessibility issues.

However, there are other drawbacks with input number.

So a quickwin is as follow :

<input id="participant_phone_number3" type="text" inputmode="numeric" pattern="[0-9]+([.,][0-9]+)?">

I use as such, in order to allow , or . as a separator, then let the server handle it.

It’s purely front-side validation, however it’s elegant enough and robust for accessibility. Double it with server-side validation if you have to, but at least I’m done with the weirdness of type="number".

Best,

David.