0

debo crear un input para el ingreso de un documento de registración que la numeración por ejemplo sería 3233 34343 3434 tengo una función de js que únicamente me hace los saltos de cuatro en cuatro

let creditNumber = document.getElementById('dpi');

creditNumber.addEventListener('input', function (e) {
    e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

esto tengo en mi función

2 respuestas 2

0

Debes modificar la expresion regular en tu segunda funcion "replace".

e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();

Tu segundo replace es el que añade el espacio que deseas a tu texto, y el valor actual es 4 por lo que incluira un espacio cada 4 caracteres.

e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1 ').trim();

Este segundo fragmento cumple con lo que deseas.

Te recomiendo leer sobre la función "replace" y sobre expresiones regulares para que puedas entenderlas y construirlas o modificarlas para que cumplan con los requerimientos que tengas.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/replace

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp

0

Si necesitas verificar un patrón similar a ese input que mencionas ( 3233 34343 3434) podrías hacer algo como esto:

const creditNumber = document.getElementById("dpi");
    
creditNumber.addEventListener("input", function (e) {
    
// Verifica el ingreso de letras

if (/[a-zA-Z]/g.test(e.target.value)) {
    e.target.value = e.target.value.replace(/[^\dA-Z]/g, "");
      };

// Verifica la longitud de acuerdo a tu patrón

if (e.target.value.length > 15) {
    e.target.value = e.target.value.slice(0,15); 
    };
      

// Verifica la coincidencia exacta con tu patrón
 
if (/^([0-9]{4})\s([0-9]{5})\s([0-9]{4})$/.test(e.target.value)) {
   alert("Es correcto")
   };

//  Verifica los espacios de acuerdo a patrón e inyecta un espacio

if (e.target.value.length === 4 || e.target.value.length === 10 ) {
    e.target.value += " ";
  }
    
 });

Dejo un CodeSandbox del ejemplo: https://codesandbox.io/s/admiring-hodgkin-cqk80p?file=/src/index.js:572-670

2
  • al utilizar este en el input ya no deja los espacios
    – Edgar Choy
    Commented el 17 ago. 2022 a las 3:37
  • Ahí corregí y ya toma los espacios. Te deje un CodeSandbox tambien. Commented el 17 ago. 2022 a las 15:01

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.