CODEWITHSUNDEEP
htmlmobile-safari
ElBel
ElBel

Reputation: 1994

Force a numeric keyboard but allow punctuation: HTML5, mobile Safari

I'm building an HTML page to be viewed in mobile Safari [and other platforms]. The page lets the user specify several start and end times. They have to input at least two times, and possibly more depending on their situation.

I want the user to be able to input their times as numbers and punctuation using the numeric-SHIFT mode keyboard, i.e. the user will see fields like this:

form fields

And they'll get the numeric-SHIFT keyboard when they focus into the field:

enter image description here

Won't work:

<input type="time"> (and related datetime types) is not an option. The scrolly-wheel is unacceptable from an HCI perspective, particularly for repeated entries.

<input type="number"> does the right thing at first. It triggers the keyboard in numeric-SHIFT mode, i.e. the numeric & punctuation portions are visible by default. But when you exit the field, mobile Safari strips out punctuation (i.e. the colon). I tried turning off validation in the form using novalidate but that didn't work.

<input type="text" pattern="[0-9]*"> triggers the telephone keyboard with no way to enter the colon character.

I may just need a different RegExp in the PATTERN attribute, but each one I've tried triggers the normal alpha keyboard, and the user has to hit a key to get to the numeric-SHIFT keypad.

Can anyone tell me how to force the keyboard into numeric-SHIFT display without triggering harsh validation rules on the user's input?

Upvotes: 1

Views: 2404

Answers (1)

Stephen Sweriduk
Stephen Sweriduk

Reputation: 278

Take a look at jQuery Mobile DateBox. here. Its possible you might want to rethink text input here. Maybe you want to go with a picker. Sencha Touch also has a DatePicker. I wrote an extension that implements a timepicker object. I'll throw it up on GitHub if you need me to.

Upvotes: 2

Related Questions