title: Using HTML5 'tel' input for masked PIN
body: <p>OK, I've been reading a fair bit about this and am running into a few limitations... so here goes.</p>
  
  <p>Consensus seems to be that a <code>'tel'</code> input is the easiest/best way to force filtering of input to numeric input on mobile devices. Mainly as it triggers the numeric keypad.</p>
  
  <p>I'm trying to use a <code>'tel'</code> input field in HTML5 to prompt a user for their numeric PIN number inside a form for submission. Here is the input code:</p>
  
  <pre><code>&lt;input type="tel" pattern="[0-9]" name="PIN" value="" maxlength="10" placeholder="Numeric PIN only" autofocus required /&gt;
  </code></pre>
  
  <p>A couple of things:</p>
  
  <ol>
  <li>How to get the keyboard to show when the page loads, and </li>
  <li>how to mask the values like a <code>type="password"</code> input field</li>
  </ol>
  
  <p>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.</p>
  
  <p>I'm hoping for a 'light'/native solution if that is at all possible as I'm working with low bandwidth requirements.</p>
  
  <p>Many thanks in advance.</p>