0

Estoy intentado hacer el formato de un número de 9 dígitos, Ejm: 999 999 999, cada vez que se escucha el evento keyup, cada 3 números debe agregarse un espacio, esto lo hago correctamente. Ahora cuando presiono la letra de Retroceso o Backspace me vuelve a generar un espacio, tengo que mantener presionada la tecla para limpiar el input, esto lo pude resolver usando el método trim() en el 2do replace.

Al hacer esto me da otro problema, y es que ya no me genera automáticamente el espacio cada 3 carácteres sino en el 4to. Ejm al usar trim: presionas 123, si lo dejas tal y como está seguirá asi, al presionar otra tecla recién agrega el espacio, en cambio al quitar trim, cuando se presiona el 3 automáticamente se genera un espacio.

Entonces cómo podría generar un espacio cada 3 números y borrar el espacio agregado cuando cada fila de 3 números esté vacía? Muchas gracias de antemano, espero se haya podido entender mi pregunta.

const input = document.getElementById('input');

input.addEventListener('keyup', e => {
  let value = e.target.value;
  
  e.target.value = value.replace(/\W/gi, '').replace(/(.{3})/g, '$1 ');

})
<input id="input" maxlength="11" />

2 respuestas 2

1

¿Y si generas el espacio cuando tecleas el siguiente grupo de 3 dígitos? D esta manera el último espacio no se agrega. Simplmente añades un replace

const input = document.getElementById('input');

input.addEventListener('keyup', e => {
  let value = e.target.value;
  
  e.target.value = value.replace(/\W/gi, '').replace(/(.{3})/g, '$1 ').replace(/\s$/,'');

})
<input id="input" maxlength="11" />

0

Creo que deberías usar input type="tel" podrías aprovechar el autocompletado de cada usuario y seria más correcto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.