CODEWITHSUNDEEP
javascripthtmluikeyboard
Paul Schorey
Paul Schorey

Reputation: 1172

iOS / iPhone type "number" keyboard to allow colon

How can I have the typical number keyboard show up, but allow ":" to be entered as valid? I want an input where people can easily enter times such as, "01:32.59" etc.

When I do <input type="number"> the correct keyboard is displayed, but it won't allow the value ":"

If I use <input type="text"> the value works as valid, but the user has to click the number icon on the keyboard first, which isn't as user friendly for entering times.

Thanks in advance for your help.

Upvotes: 0

Views: 543

Answers (2)

Paul Schorey
Paul Schorey

Reputation: 1172

Unfortunately the type=number input auto validates to ensure that only numbers are entered and this can't be bypassed and regex can't be used to allow for other submissions, so while the iPhone opens up a keyboard with the numbers on top, any value other than a real number will not be passed on.

Also unfortunate, is that type=text cannot default to show the numbers on the iPhone keyboard using html or javascript.

A work around is to set the type=number before the user enters their data (this pulls up the number keyboard in iOS), and then switch to type=text etc. after the user is finished entering data.

My solution was to use:

$('#myInput').on('focus', function() {
  $(this).attr('type', 'number');
});

$('#myInput').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

This was a minor adaption from the answer by Vizllx on Force iOS numeric keyboard with custom / currency pattern

Upvotes: 0

baao
baao

Reputation: 73231

You could use the input type time for inputs that expect a time

<input type="time" step="1" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}">

On iOS this even opens a timepicker instead of a keyboard for your users.

Upvotes: 1

Related Questions