Puede hacer un reemplazo de cadena antes de enviar la cadena al backend:

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

¿También puede usar una entrada oculta para almacenar la cadena no espaciada y una visible para la espaciada y simplemente actualizarlas? Solo enviarías el oculto.

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

Solución de ejemplo que utiliza el tipo de entrada de pattern con expresión regular simple que garantiza solo números, espaciado correcto y envía solo números sin espacios al servidor.

Su código se descompone si el usuario ingresa espacios por sí mismo, por lo que JavaScript se mejoró para garantizar el formato correcto.

1. Ignore la entrada de espacios y cualquier entrada de más de 12 caracteres evitando el comportamiento predeterminado (ignore la pulsación de tecla):

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

(Literalmente, "si 12 caracteres O la pulsación de tecla es la barra espaciadora Y la tecla no es la tecla de retroceso", entonces ignore la pulsación de tecla)

2. Agregue espacios automáticamente (como lo hizo su código): if ((txt.length == 3 || txt.length == 7) && e.which !== 8)...

NOTA: en ambos casos, si se presiona la tecla de retroceso, permita que esa tecla funcione (código de tecla 8).

3. Cuando se envíe el formulario, elimine los espacios de la entrada "teléfono" para que el servidor solo reciba los números.

 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>

Es un poco complicado decidir exactamente cuál debería ser la interfaz de usuario. Aunque pueden ver los espacios, no pueden eliminarlos, lo que podrían hacer si se permitiera la edición normal del navegador.

También queremos ignorar la entrada que no sea de dígitos y no permitir que el número total de dígitos supere los 10.

Este fragmento hace estas cosas al tener la entrada como texto normal en lugar de un número y probar cada entrada clave para ver si debe incluirse o no y reescribir el valor cada vez con los espacios insertados si es necesario.

 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">

Es necesario reflexionar más sobre si algunas mejoras en la interfaz de usuario serían una buena idea. Por ejemplo:

• reposicionar el cursor (en este momento va al final de la cadena después de cada entrada que el usuario tal vez no esperará si está editando parte del número)
• y probablemente sea un punto discutible si es mejor mostrar brevemente un carácter que es ilegal, para asegurarle al usuario que de hecho presionó una tecla, o si ese carácter nunca debería mostrarse.

Antes de enviar el valor al backend, recuerde eliminar los espacios:

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