0

I'm devlopping a web app using Phonegap and HTML5.

When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.

Is that even possible?

Nicolas
  • 1,812
  • 3
  • 19
  • 43

1 Answers1

0

Telephone: <input type="tel" name="usrtel">

This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)

The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools

Edit from Mon. 1st of Sept. 2014, 4:30pm: I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.

If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:

HTML

<input type="text">

and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern

The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.

There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

If there are more questions, let me know and i'm going to edit again.

Community
  • 1
  • 1
Sithys
  • 3,655
  • 8
  • 32
  • 67
  • This may work, but this is not what I need. This opens up a numeric keyboard, people can't insert characters, can they ? – Nicolas Sep 01 '14 at 14:50
  • So you want numbers and text, a combination of that? Make a Combination of the pattern you need, 0-9 a-z etc. – Sithys Sep 01 '14 at 14:53
  • Yes numbers and text (alpha-numeric): most users will only enter numbers but some of them need characters... That's why I wonder if I can use the common text-typed keyboard, but with the numbers by default (without using the '@123' key). Is that any clearer? – Nicolas Sep 01 '14 at 15:03