23

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?

MetaGuru
  • 42,847
  • 67
  • 188
  • 294
Peteinatlanta
  • 231
  • 2
  • 4
  • I'm confused, is this for an HTML input field or what? – MetaGuru Oct 10 '12 at 13:49
  • 1
    No, it's for a contenteditable HTML element, not an HTML input. So I can click/tap on the element and its editable without the use of an input element. Here's an example: http://html5demos.com/contenteditable – Peteinatlanta Oct 10 '12 at 13:50
  • 3
    Oh well this is a damn good question then. – MetaGuru Oct 10 '12 at 13:52
  • If you expect users to input numbers and not anything else, Why are you using a contentEditable element instead of a correct HTML input? – AlfonsoML Oct 10 '12 at 20:19
  • 2
    We're just trying something new to see how far we can take it. – Peteinatlanta Oct 11 '12 at 14:32
  • @Peteinatlanta I dropped a bounty on here and someone has posted a suggestion, I don't have my iPad any more so if you still are in need of this solution maybe try and see if it works and post your findings? – MetaGuru Oct 22 '12 at 14:40
  • @ioSamurai I tried yogee's solution and ile's comment as well but it doesn't work. The user cannot enter anything but numbers but the numeric keyboard does not show up. – Dave Aug 07 '13 at 14:19
  • @ioSamurai, I realize this is a few months late but you had stated you dropped a bounty, as well as asked the OP to try it and post their findings. I tried it out and thought you might be interested in my findings as the OP never did give an update, but guess not! Sorry for bugging you. – Dave Aug 07 '13 at 19:58

5 Answers5

3

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/

notatoad
  • 375
  • 2
  • 10
0

I read in this post that you can use the \d* pattern to make the number keyboard appear on iOS, so a basic form with a number keyboard would look like:

<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>

which should cause a number keyboard to automatically appear on iOS when entering form information.

Now, I'm pretty sure we could extrapolate this and say that we could use \d* on the contenteditable div to answer the question:

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>

I hope this works out for you?

ipsa scientia potestas
  • 483
  • 1
  • 8
  • 23
0

I am not sure how you are using the keyboard here? Means, Is the user adding / Updating time or something? If they do, make the input type to number. This is will tell the browser (safari) that this is input for only numbers and it will tell the iOS to show number pad automatically.

<input type="number">

Checkout my fun project called weight calculator. Check how it will prevent any other keys inside input as well as it will show Number pad in mobile device. Weight Calculator

Harsh Patel
  • 11
  • 1
0
<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>

then

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>
Akanimo
  • 39
  • 5
  • 4
    Welcome to StackOverflow. Code-only answers are low-quality answers. Add some explanation to why this code works. – Taslim Oseni Sep 22 '19 at 10:56
0
<input type="tel" pattern="[0-9]*" novalidate>

This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.

RickJo
  • 86
  • 1
  • 8