Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force Number keyboard on ipad for contenteditable element

Tags:

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?

like image 621
Peteinatlanta Avatar asked Oct 10 '12 13:10

Peteinatlanta


1 Answers

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/

like image 166
notatoad Avatar answered Sep 22 '22 14:09

notatoad