title: How to allow only digits to be entered into an input[type="number"] field?
body: <p>I have an input field in which the user should only be able to enter digits <code>[0-9]</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("integer").addEventListener('input', restrictToInteger);
  function restrictToInteger() {
      this.value = this.value.replace(/[^\d]/g, '');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" id="integer" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="https://jsfiddle.net/838pa8hv/" rel="nofollow noreferrer">jsFiddle Demo</a></strong></p>
  
  <p>The problem is this: When I enter a number (eg. <code>1234</code>) and then press dot (<code>.</code>), + or - the content of the input field is automatically deleted by the browser (value is set to "" = empty string). But why? Changing the type from <code>number</code> to <code>text</code> seems to fix the problem. But then I lose the up/down arrow functionality of the input field. Any ideas?</p>