2

Estou em dificuldade de criar uma máscara para input de matrícula.

As matrículas são formada por 4 ou 5 dígitos, hífen , 1 digito. (0000?-0).

A máscara deve ser aplicada conforme a digitação do input.

Mas não consegui fazer usando Javascript puro.

O site então não possui jQuery, entao não quero ter que adicionar o jQuery e um plugin de máscara para isso.

5
  • Então pq as tags que vc não quer estão na pergunta?
    – user60252
    Commented 7/12/2017 às 22:20
  • @LeoCaracciolo foi feita a edição, eu tinha rejeitado justamente porque ao ler entendi que não tem nada com jQuery, acabou que no final o AP aprovou a edição.
    – NoobSaibot
    Commented 7/12/2017 às 22:21
  • @wmsouza, correto, mas a pergunta continua com O site então não possui jQuery, entao não quero ter que adicionar o jQuery e um plugin de máscara para isso.
    – user60252
    Commented 8/12/2017 às 0:21
  • Sim, o correto é reverter essa edição.
    – NoobSaibot
    Commented 8/12/2017 às 0:24
  • foi feita a edição. Obrigado pela correção :D Commented 9/12/2017 às 11:39

4 Respostas 4

2

Usando Expressão Regular chegará ao resultado.

  • \d Somente digitos
  • {4,5} Limita de 4 a 5 digitos

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");
    }
  });
}
input {
  border: 2px solid #ccc;
  color: #069;
  padding: 8px;
}
.invalido {
  border-color: red;
}
<input type="text" name="matricula" id="matricula" maxlength="7" />

ES6

const maskMatricula = (el) => {
  let matricula = el.value.replace(/\D/g,""); // Remove o que não é digito
  matricula = matricula.replace(/(\d{4,5})(\d{1})$/,"$1-$2"); // 4 ou 5 digitos a esquerda e 1 a direita
  console.log(matricula); // Mostra no Console
  el.value = matricula; // Insere o valor formatado no input
  if (el.value.length < 5) { // Valida
    el.classList.add("invalido");
  } else {
    el.classList.remove("invalido");
  }
}
input {
  border: 2px solid #ccc;
  color: #069;
  padding: 8px;
}
.invalido {
  border-color: red;
}
<input type="text" name="matricula" id="matricula" maxlength="7" onkeyup="maskMatricula(this)" />

Referências

2
  • Deu certo, muito obrigado :D Commented 7/12/2017 às 23:35
  • @DallingtonAugusto considere marcar como Aceita :D
    – NoobSaibot
    Commented 7/12/2017 às 23:37
0

posso te recomendar que ao invés de você recusar o plugin de máscaras em jquery, você a use porém adaptando-a ao javascript puro, ficará mais fácil e compatível com seu web, e também te ajudará a criar mais máscaras.

0

Sem uma jQuery,você vai precisar fazer tudo na mão, o que é muito mais complicado... Mas você pode usar o onKeyPress pra contar os dígitos durante a digitação:

<input type="text" onkeypress="mascara()">

e a função:

var count = 0; 
function mascara(){
    count++;
    alert(count);
}

e depois colocar um if pra quando atingirem 4 (ou 5) dígitos adicionar um "-" na frente. Acho que com Javascript puro fica mais ou menos assim:

if(count == 5){
        var digitos = document.getElementById('inputComMascara').value;
        alert(digitos);
        document.getElementById('inputComMascara').value = digitos+'-'; 
    }

Se for pra fazer assim, recomendo também que adicione um script para decrementar o contador caso a pessoa clique no Backspace, ou melhor ainda, ao invés do contador utilize o .lenght()

0

Passo a passo com javascript puro evento onkeyup.

function validaMatricula() {
    //retorna valor digitado no input
    var str = document.getElementById("matricula").value;
    //testa se há tracinho na posição permitida
    if((str.indexOf("-")==4)||(str.indexOf("-")==5)){
      //array de strings separados pelo "-" (tracinho)
      var res = str.split("-");
      //verifica se contem somente numeros
      if ((!isNaN(res[0]))&&(!isNaN(res[1]))) {
          //verifica se primeira parte contem 4 ou 5 digitos e
          //se a segunda parte contem 1 digito
          if((res[0].length==4 || res[0].length==5) && (res[1].length==1)){
            document.getElementById("testar").innerText = "Válido";
            document.getElementById('testar').style.backgroundColor = 'blue';
            document.getElementById('testar').style.color = 'white';
          }else{
            document.getElementById("testar").innerText = "Inválido";
            document.getElementById('testar').style.backgroundColor = 'red';
            document.getElementById('testar').style.color = 'yellow';
          }
     }else{
        document.getElementById("testar").innerText = "inválido";
        document.getElementById('testar').style.backgroundColor = 'red';
        document.getElementById('testar').style.color = 'yellow';
    }

  }else{
      document.getElementById("testar").innerText = "inválido";
      document.getElementById('testar').style.backgroundColor = 'red';
      document.getElementById('testar').style.color = 'yellow';
  }

}
<input type="text" onkeyup="validaMatricula()" id="matricula" value="">
<button id="testar">Testar</button>

Passo a passo com javascript puro evento onclick.

function validaMatricula() {
    //retorna valor digitado no input
    var str = document.getElementById("matricula").value;
    //testa se há tracinho na posição permitida
    if((str.indexOf("-")==4)||(str.indexOf("-")==5)){
      //array de strings separados pelo "-" (tracinho)
      var res = str.split("-");
      //verifica se contem somente numeros
      if ((!isNaN(res[0]))&&(!isNaN(res[1]))) {
          //verifica se primeira parte contem 4 ou 5 digitos e
          //se a segunda parte contem 1 digito
          if((res[0].length==4 || res[0].length==5) && (res[1].length==1)){
            document.getElementById("testar").innerText = "Válido";
            document.getElementById('testar').style.backgroundColor = 'blue';
            document.getElementById('testar').style.color = 'white';
          }else{
            document.getElementById("testar").innerText = "Inválido";
            document.getElementById('testar').style.backgroundColor = 'red';
            document.getElementById('testar').style.color = 'yellow';
          }
     }else{
        document.getElementById("testar").innerText = "inválido";
        document.getElementById('testar').style.backgroundColor = 'red';
        document.getElementById('testar').style.color = 'yellow';
    }

  }else{
      document.getElementById("testar").innerText = "inválido";
      document.getElementById('testar').style.backgroundColor = 'red';
      document.getElementById('testar').style.color = 'yellow';
  }

}
<input type="text" id="matricula" value="">
<button id="testar" onclick="validaMatricula()">Testar</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .