Force Number keyboard on ipad for contenteditable element

Question

I'm using contenteditable in several sections of our time keeping app. Since we're logging time, naturally, I want the keyboard to automatically switch to the number keyboard for ipad users. I've tried adding all the attributes to the elements that I can think of such as:

• Type=number
• Type=tel
• pattern=[0-9]*

but ipad still loads the default keyboard.

Here's an example:

<div class="editable validate numbers-only" contenteditable="true" type="number" pattern="[0-9]*">3</div>

Are there any tricks that I can use to display the number keyboard for my ipad users?

Answer 1

you can set the inputmode attribute on a contenteditable element to control which keyboard is displayed, at least in chrome and mobile safari. for example:

<div contenteditable=true inputmode=decimal><div>

i tested out a few more examples here: https://notatoad.github.io/inputmodes.com/