1

OK, I've been reading a fair bit about this and am running into a few limitations... so here goes.

Consensus seems to be that a 'tel' input is the easiest/best way to force filtering of input to numeric input on mobile devices. Mainly as it triggers the numeric keypad.

I'm trying to use a 'tel' input field in HTML5 to prompt a user for their numeric PIN number inside a form for submission. Here is the input code:

<input type="tel" pattern="[0-9]" name="PIN" value="" maxlength="10" placeholder="Numeric PIN only" autofocus required />

A couple of things:

  1. How to get the keyboard to show when the page loads, and
  2. how to mask the values like a type="password" input field

The keyboard shows when I tap on the input, however I'd really like it (or any other keyboard) to pop up when the page loads.

I'm hoping for a 'light'/native solution if that is at all possible as I'm working with low bandwidth requirements.

Many thanks in advance.

btg_1967
  • 79
  • 1
  • 13
  • Just changed HTML to HTML5 in title of question – btg_1967 Jul 20 '14 at 09:48
  • *"Consensus seems to be that a 'tel' input is the easiest/best way to force filtering of input to numeric input on mobile devices."* Really? That seems like a really bad idea. Why not... [`type="number"`](http://www.w3.org/TR/html5/forms.html#number-state-(type=number))? – T.J. Crowder Jul 20 '14 at 09:50
  • @T.J.Crowder Unfortunately Apple's documentation suggests this. [See here.](https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html#//apple_ref/doc/uid/TP40009542-CH5-SW12) – Sandy Chapman Jul 20 '14 at 09:59
  • @SandyChapman: From that page: *"To display a numeric keyboard, set the value of the `pattern` attribute to `"[0-9]*"` or `"\d*"`."* They even show an example: `` (although that example is quite poor, you never close `input` tags like that; in HTML, you just write ``, in XHTML you write `` [the latter is *allowed*, but pointless, in HTML]). – T.J. Crowder Jul 20 '14 at 10:05
  • These are great - thanks @T.J.Crowder this worked... sort of. now running into cross platform issues - it appears that android/chrome doesn't respond to the `[0-9]*` or `[\d*]` patterns and trigger the numeric keypad. I've sort of worked around it for now: `` – btg_1967 Jul 20 '14 at 14:31

1 Answers1

1

1) To get the keyboard to show set the focus when the page loads to your text input field using javascript. You may need to add a delay:

setTimeout(function_that_sets_input,5000);

Note: This solution has certain issues on iOS 5 and prior. Sometimes the setTimeout doesn't get fired. A more robust solution is to call the javascript method from Obj-C code in viewDidAppear (or similar).

2) See this answer. You're going to want to set the pattern to:

<input type="password" pattern="[0-9]*" ... />

Community
  • 1
  • 1
Sandy Chapman
  • 11,133
  • 3
  • 58
  • 67
  • 1
    +1 for your #2, but I had to fix your #1: `setTimeout(function_that_sets_input(),5000);` **calls** `function_that_sets_input` immediately and passes its return value into `setTimeout`, exactly the way `foo(bar())` **calls** `bar` and passes its return value into `foo`. – T.J. Crowder Jul 20 '14 at 09:56
  • @T.J.Crowder Thanks. It's been a while since I've javascripted, so I overlooked that. – Sandy Chapman Jul 20 '14 at 10:00