title: Best settings for HTML <input type="number">, for mobile devices
body: <p>I've been reading many other questions, like these<a href="https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes">[1]</a><a href="https://stackoverflow.com/questions/14447668/input-type-number-is-not-showing-a-number-keypad-on-ios">[2]</a><a href="https://stackoverflow.com/questions/14447668/input-type-number-is-not-showing-a-number-keypad-on-ios">[3]</a> for example, but the problem still persists.</p>
  <p>I need to find the &quot;cleanest&quot; way to have a HTML <code>input</code> for mobile devices and which respects all these three rules:</p>
  <ol>
  <li><p><strong>suitable mainly for numbers</strong>, integer or float</p>
  </li>
  <li><p>shows <strong>the numeric keypad on mobile devices</strong>, on Chrome for Android and Safari for iOS, with no strange extra keys</p>
  <p><a href="https://i.stack.imgur.com/7IEJ2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7IEJ2.jpg" alt="enter image description here" /></a></p>
  </li>
  <li><p><strong>fully respects the HTML5 rules</strong>, tested by W3C validator</p>
  </li>
  </ol>
  <br>
  <h2>What have I tried?</h2>
  <p>I've been across these solutions, which neither of them cumulatively respect those three above rules.</p>
  <h3>Solution 1</h3>
  <pre><code>&lt;input type=&quot;text&quot; pattern=&quot;\d*&quot; /&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6bLIl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6bLIl.png" alt="enter image description here" /></a></p>
  <p>This solution despite working in iOS and fulfilling HTML rules tested by W3C validator, presents in Chrome Android the full keypad with the QWERTY keyboard.</p>
  <h3>Solution 2</h3>
  <pre><code>&lt;input type=&quot;number&quot; pattern=&quot;\d*&quot; /&gt;
  </code></pre>
  <p>This solution works on both systems iOS and Android Chrome, showing the number keypad on both systems, but it throws an HTML validation error with W3C validator:</p>
  <blockquote>
  <p>Attribute <strong>pattern</strong> is only allowed when the input type is email, password, search, tel, text, or url.</p>
  </blockquote>
  <h3>Solution 3</h3>
  <pre><code>&lt;input type=&quot;number&quot; /&gt;
  </code></pre>
  <p>This solution passes the W3C HTML test, it shows nice on Chrome, but on iOS keypad it presents several unwanted keys</p>
  <p><a href="https://i.stack.imgur.com/h3wrn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h3wrn.png" alt="enter image description here" /></a></p>
  <h3>Solution 4</h3>
  <p>I see many developers using this solution</p>
  <pre><code>&lt;input type=&quot;tel&quot; /&gt;
  </code></pre>
  <p>But in Android Chrome it doesn't allow dot symbols <code>.</code> (thus no floats), and the keys have letters, which is superfluous</p>
  <p><a href="https://i.stack.imgur.com/6cTDB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6cTDB.png" alt="chrome input type=&quot;tel&quot;" /></a></p>