0

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.

Paul Schorey
  • 862
  • 10
  • 14

2 Answers2

1

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.

baao
  • 71,625
  • 17
  • 143
  • 203
  • 1
    That doesn't quite fit what I need, the times I'm using are from a stopwatch app and are in the format "minutes : seconds . hundredths " ie something like "4:15.38" (for say like a mile time) So it can't have AM / PM, and needs to go up past 24 on occasion. – Paul Schorey Jun 26 '18 at 23:40
0

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

Paul Schorey
  • 862
  • 10
  • 14
  • Sadly this does not work on my Android phone, as soon as the type changes the keyboard also changes, and I haven't found another solution. It seems so ridiculous that the number keyboard contains the colon, yet we're not allowed to input it. – therks Oct 07 '19 at 03:33