<!DOCTYPE html>
<body>
<h1>Hello World</h1>
<div>
<label>digite o CPF / insert CPF:</label>
<input id="CPFInput" maxlength="11" oninput="criaMascara('CPF')">
</div>
<div>
<label>digite o Celular / insert phone number:</label>
<input id="CelularInput" maxlength="11" oninput="criaMascara('Celular')">
</div>
<div>
<label>digite o CEP / insert zip code:</label>
<input id="CEPInput" maxlength="8" oninput="criaMascara('CEP')">
</div>
<div>
<label>digite o número do processo (padrão CNJ):</label>
<input id="CNJInput" maxlength="20" oninput="criaMascara('CNJ')">
</div>
</body>
<script>
function criaMascara(mascaraInput) {
const maximoInput = document.getElementById(`${mascaraInput}Input`).maxLength;
let valorInput = document.getElementById(`${mascaraInput}Input`).value;
let valorSemPonto = document.getElementById(`${mascaraInput}Input`).value.replace(/([^0-9])+/g, "");
const mascaras = {
CPF: valorInput.replace(/[^\d]/g, "").replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4"),
Celular: valorInput.replace(/[^\d]/g, "").replace(/^(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"),
CEP: valorInput.replace(/[^\d]/g, "").replace(/(\d{5})(\d{3})/, "$1-$2"),
CNJ: valorInput.replace(/[^\d]/g, "").replace(/(\d{7})(\d{2})(\d{4})(\d{1})(\d{2})(\d{4})/, "$1-$2.$3.$4.$5.$6"),
};
valorInput.length === maximoInput ? document.getElementById(`${mascaraInput}Input`).value = mascaras[mascaraInput]
: document.getElementById(`${mascaraInput}Input`).value = valorSemPonto;
};
</script>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.