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