Você pode usar o plugin JQuery
InputMask. Com ele você consegue definir o formato dos dados de um input
.
Para definir o formato do CPF, basta usar o seguinte código jQuery
:
$("#frmCpf").inputmask({
mask: "999.999.999-99"
});
Cada 9
indica que nessa posição só pode ter valores no intervalo [0, 9]
. Se não quiser os .
e o -
, basta remover eles da máscara.
Outra forma de usar o InputMask
é direto no html, com o atributo data-inputmask
.
<input type="text" id="frmNumero" name="frmNumero" placeholder="Somente números" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false"/>
Depois basta chamar $("#frmNumero").inputmask();
no JavaScript
.
A propriedade repeat
indica quantas vezes a máscara vai se repetir. No caso do input
acima, podemos inserir valores no intervalo [0, 9]
um máximo de 10
vezes. Já a propriedade greedy: false
faz com que o plugin exiba a menor máscara que ele conseguir.
É importante que você dê uma lida na documentação se for criar novas máscaras.
Segue um exemplo executando:
$(function(){
$("#frmCpf").inputmask({
mask: "999.999.999-99"
});
$("#frmNumero").inputmask();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input type="text" id="frmCpf" name="frmCpf" placeholder="Somente números"/>
<input type="text" id="frmNumero" name="frmNumero" placeholder="Somente números" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false"/>
Se não estiver usando JQuery
:
Você pode usar o VanillaMasker.
Para definir o formato do CPF, basta usar maskPattern
, como no código a seguir:
VMasker(document.getElementById("frmCpf")).maskPattern("999.999.999-99");
A máscara funciona de forma semelhante ao que falei para o InputMask
.
Para indicar que um campo é apenas numérico, basta usar o método maskNumber
, como no código a seguir:
VMasker(document.getElementById("frmNumero")).maskNumber();
Segue um exemplo usando o VanillaMasker
:
VMasker(document.getElementById("frmCpf")).maskPattern("999.999.999-99");
VMasker(document.getElementById("frmNumero")).maskNumber();
<script src="//unpkg.com/vanilla-masker@1.1.1/build/vanilla-masker.min.js"></script>
<input type="text" id="frmCpf" name="frmCpf" placeholder="Somente números"/>
<input type="text" id="frmNumero" name="frmNumero" placeholder="Somente números" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false"/>