title: Adding oninput space to HTML input form value with JS, not working
body: <p>I am trying to add automatic spacing of numbers in an HTML input field, with help of javascript, but it seems to be some limitations to the input field itself. I am writing this as a part of a wordpress plugin, so that's why I am escaping &quot;: to use it into the return variable for the plugin output.</p>
  <p>So,
  I have the basic input field HTML code:</p>
  <pre><code>      &lt;input class=\&quot;numbersfield\&quot; type=\&quot;numbers\&quot; oninput=\&quot;numberWithSpaces(this.value);\&quot;&gt;
  </code></pre>
  <p>And here is the function:</p>
  <pre><code>function numberWithSpaces(x) {
  var parts = x.toString().split(\&quot;.\&quot;);
  document.getElementById(\&quot;numbersfield\&quot;).value = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, \&quot; \&quot;);
  </code></pre>
  <p>And it's outputting no spacing in the numbers field. However, when pushing the same data out to a label, the spacing is there: (see also screengrab in the link)</p>
  <pre><code>document.getElementById(\&quot;lblError\&quot;).innerHTML = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, \&quot; \&quot;);
  document.getElementById(\&quot;numbersfield\&quot;).value = parts.join(\&quot; \&quot;);
  document.getElementById(\&quot;numbersfield\&quot;).value = document.getElementById(\&quot;lblError\&quot;).innerHTML
  </code></pre>
  <p>}</p>
  <p>Using this as a number input field, makes the field empty after applying the first space. Changing it to input type text resolves this. At last when I suddenly thought I had it, it gives wrong spacing after the first correct spacing, spacing every new value, like 1 0 0 0 000 000.</p>
  <p>Anyone got the grip of this functionality? Any help appreciated!</p>
  <p><a href="https://i.stack.imgur.com/eLoyh.png" rel="nofollow noreferrer">screengrab of input form</a></p>