Question

I built a webapp for mobile.

My DOM has a <div contenteditable="true"> which triggers a keyboard showing up on iOS on touch into the container. So far so good, but in the particular case, I want the user to enter numbers with decimals, so I would like to trigger a numpad with decimal support on iOS (on all mobile broswers later).

Can anyone tell me how to CSS or attribute my container to get the desired numpad?

Answer 1

I think you should replace your current input tag with the following one

<input type="number" pattern="[0-9]*" />

That’s actually telling iOS (and Android) browser to use the large numpad.

For more details see here.