You can do a string replace before submitting the string to the backend:

number_str = this.value.replace(" ","");
let number_number = parseInt(number_str);
//backend request stuff

You can also use a hidden input to store the unspaced string and a visible one for the spaced one and just update them both? You would only submit the hidden one.

<input id="phonenumber" type="text" />
<input id="secret-phonenumber" type="hidden" />

Example solution using the pattern input type with simple regexp that ensures only numbers, correct spacing, and submits only numbers without spaces to the server.

Your code does breaks down if the user inputs spaces themselves, so the JavaScript has been enhanced to ensure the correct format.

1. Ignore the input of spaces and any input beyond 12 characters by preventing the default behavior (ignore the keystroke):

if ((txt.length == 12 || e.which == 32) & e.which !== 8) e.preventDefault();

(Literally "if 12 characters OR keypress is spacebar AND key is not the backspace key" then ignore the keypress)

2. Add spaces automatically (as your code did): if ((txt.length == 3 || txt.length == 7) && e.which !== 8)...

NOTE: in both cases, if the backspace key is pressed, then allow that key to work (keycode 8).

3. When the form is submitted, remove any spaces from the "phone" input so the server only receives the numbers.

document.getElementById("phone").addEventListener("keydown", function(e) {
  const txt = this.value;
  // prevent more than 12 characters, ignore the spacebar, allow the backspace
  if ((txt.length == 12 || e.which == 32) & e.which !== 8) e.preventDefault();
  // add spaces after 3 & 7 characters, allow the backspace
  if ((txt.length == 3 || txt.length == 7) && e.which !== 8)
    this.value = this.value + " ";
});
// when the form is submitted, remove the spaces
document.forms[0].addEventListener("submit", e => {
  e.preventDefault();
  const phone = e.target.elements["phone"];
  phone.value = phone.value.replaceAll(" ", "");
  console.log(phone.value);
  //e.submit();
});

<form>
  <input id="phone" name="phone" type="pattern" placeholder="### ### ####" pattern="[\d]{3} [\d]{3} [\d]{4}">
  <input type="submit">
</form>

It's slightly tricky to decide exactly what the user interface should be. Although they can see the spaces they can't delete them, which if the normal browser editing were allowed they would be able to do.

We also want to ignore non-digit input and not allow the total number of digits to go beyond 10.

This snippet does these things by having the input as type normal text rather than number and testing each key input to see if it should be included or not and rewriting the value each time with the spaces inserted if required.

const phone = document.querySelector('.phone');
phone.addEventListener("keyup", function(e) {
  let txt = this.value.replace(/\D/g, '');
  let newtxt = '';
  //now copy the number inserting a space where needed
  for (let i = 0; i < Math.min(txt.length, 10); i++) {
    newtxt += txt[i];
    if ((i == 2) || (i == 5)) {
      newtxt += ' ';
    }
  }
  if (newtxt[newtxt.length - 1] == ' ') newtxt = newtxt.substring(0, newtxt.length - 1);
  this.value = newtxt;
});

<input class="phone">

There needs to be further thought as to whether some refinements to the user interface would be a good idea. For example:

• re-positioning the cursor (at the moment it goes to the end of the string after each input which the user maybe won't expect if they are editing part way along the number)
• and it's probably a moot point as to whether it is best to show briefly a character that is illegal, to sort of reassure the user they have indeed pressed a key, or whether that character should never show.

Before submitting the value to the backend, remember to remove the spaces:

phone.value.replace(/\D/g, '');