How to apply mask in a field in this format "000 000 000 0"? [closed]

Question

How to apply mask in a field in this format "000 000 000 0"? [closed]

Navigation

#1 by (1 votes)

-4

I got this ready mask code, but I would like to adapt 000 000 000 0 format:

window.onload = function(){
  var campo = document.querySelector('#matricula');
  campo.addEventListener('keyup', function(){
  var matricula = campo.value.replace(/\D/g,""); // Remove o que não é digito
   matricula = matricula.replace(/(\d{4,5})(\d{1})$/,"$1-$2"); // 4 ou 5 dígitos a esquerda e 1 a direita
   console.log(matricula); // Mostra no Console
   this.value = matricula; // Insere o valor formatado no input
   if (campo.value.length < 5) { // Valida
     campo.classList.add("invalido");
   } else {
    campo.classList.remove("invalido");
  }
});
}

javascript

asked by anonymous 13.08.2018 / 14:00

1 answer

A view using two MVC models [duplicate] Why class object is null?

score 1 · Answer 1

I think the limit is 13 characters in the mask, because of the format 000 000 000 0 , so start by applying maxlength="13" to prevent the user typing many things.

In the example I used 2 regex:

/^(\d{3})(\d{3})(\d{3})(\d)+$/     <-- para extrair os numeros
/^(\d{3}) (\d{3}) (\d{3})(\d)+$/   <-- para validar após aplicar a mascara

With regex:

function MascaraFormato(campo)
{
    if (!campo) return;

    //extrai os numeros
    var formato = /^(\d{3})(\d{3})(\d{3})(\d)+$/;

    //valida o formato final
    var valido = /^(\d{3}) (\d{3}) (\d{3}) (\d)+$/;

    var timer,       // Para evitar multiplas execuções
        executando;  // Para preveinir o ".value = " disparar o evento

    function mascara()
    {
       if (executando) return;

       //Remove os numeros
       var matricula = campo.value.replace(/\D/g, "");
       
       //Extrai os numeros
       matricula = matricula.replace(formato, "$1 $2 $3 $4");

       //Bloqueia o ".value=" para evitar conflitos
       executando = true;

       //Testa se o formato foi extraido
       if (valido.test(matricula)) {
           campo.value = matricula;
           campo.classList.remove("invalido");

       //se não validar então limpa o campo
       } else {
           campo.value = ""; //Apaga o campo
           campo.classList.add("invalido");
       }

       // libera para voltar a aplicar a mascar, acaso ocorra outra alteração
       executando = false;
    }

    mascara(); //Executa a mascara quando a "página carrega"

    campo.addEventListener('input', function () {
         // Previne multiplas execuções
         if (timer) clearTimeout(timer);

         timer = setTimeout(mascara, 500);
    });
}

//Aplica a um campo
MascaraFormato(document.querySelector('#matricula'));

//Aplica a outro campo
MascaraFormato(document.querySelector('#outro'));

<input id="matricula" maxlength="13">

<input id="outro" maxlength="13">

A simpler way would be to use .match to divide the string by 3 in 3, then with substring remove what is not important and to validate the format just check if the string size is the same as maxlength="13" , that is, if it is smaller / different 13 means that the value entered is not valid

It took a regex just to split the string, but overall it's simpler, for example:

function MascaraFormato(campo)
{
    if (!campo) return;

    var maxLength = parseInt( campo.getAttribute("maxlength") );

    var timer, executando;  // Para preveinir o ".value = " disparar o evento

    function mascara()
    {
       if (executando) return;

       //Remove os numeros
       var matricula = campo.value.replace(/\D/g, "");

       //Divide a string de 3 em 3 (array)
       matricula = matricula.match(/.{1,3}/g);

       if (matricula) {
            //com .join junta novamente aplicando espaços
            matricula = matricula.join(" ");

            //Limita a string ao tamanho de 13 caracteres, o mesmo do maxlength
            matricula = matricula.substring(0, maxLength);

            //Bloqueia o ".value=" para evitar conflitos
            executando = true;

            //Testa se o formato foi extraido, deve ter o tamanho exato
            if (matricula.length == maxLength) {
               campo.value = matricula;
               campo.classList.remove("invalido");

               executando = false;

               return; //Para a função neste ponto
            }
       }

       campo.value = ""; //Apaga o campo se for invalid
       campo.classList.add("invalido");

       executando = false;
    }

    mascara(); //Executa a mascara quando a "página carrega"

    campo.addEventListener('input', function () {
         // Previne multiplas execuções
         if (timer) clearTimeout(timer);

         timer = setTimeout(mascara, 500);
    });
}

//Aplica a um campo
MascaraFormato(document.querySelector('#matricula'));

//Aplica a outro campo
MascaraFormato(document.querySelector('#outro'));

<input id="matricula" maxlength="13">

<input id="outro" maxlength="13">