Mask for CPF or CNPJ without using plugins

Asked

Viewed 13,707 times

4

I managed to make simple mask for telephone fields, zip code, R$, etc.
But I wanted a mask to detect and automatically format a field for CPF or CNPJ in the same input, but preferably pure html/javascript, without plugins, at most using as conditional a radio button or dropdown.

It is possible to do this without using any plugin or I am asking too?

Adding: I know the subject is very repetitive, and I even found a lot of documentation about it, but always using external plugins, I would like to be able to do something totally portable, that doesn’t need additional files and that works offline.

I made the generic mask using the next function:

function formatar(mascara, documento){
var i = documento.value.length;
var saida = mascara.substring(0,1);
var texto = mascara.substring(i)
if (texto.substring(0,1) != saida){
documento.value += texto.substring(0,1);

and later in the inputs the events: onkeypress="formatar('###.###.###-##', this)" and etc

I wanted a function or script that detected the number of digits inserted to configure the mask as CPF or CNPJ.

javascript html

  • java web? What have you done so far of this page?

  • 2

    Do you know Primefaces? Everything is ready there.

  • 3

    Edit the question and add relevant portion of the page. Or Do you want someone willing to help you to have to download your entire project from the drive? Make life easier for anyone who will help you, edit the question by adding the page code where you want to insert these filters.

  • 2

    This is not java, it’s javascript.

  • Sorry... totally beginner, this is my first file with anything other than plain text and fields/tables.

2 answers

14


Try these masks using regex.

function formatarCampo(campoTexto) {
    if (campoTexto.value.length <= 11) {
        campoTexto.value = mascaraCpf(campoTexto.value);
    } else {
        campoTexto.value = mascaraCnpj(campoTexto.value);
    }
}
function retirarFormatacao(campoTexto) {
    campoTexto.value = campoTexto.value.replace(/(\.|\/|\-)/g,"");
}
function mascaraCpf(valor) {
    return valor.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g,"\$1.\$2.\$3\-\$4");
}
function mascaraCnpj(valor) {
    return valor.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g,"\$1.\$2.\$3\/\$4\-\$5");
}
<input type="text" onfocus="javascript: retirarFormatacao(this);" onblur="javascript: formatarCampo(this);" maxlength="14"/>

  • 1

    Good. I’m already looking good. I’ll poke around to try to adapt to use with onkeypress instead of onblur, but if I can’t I’ll use it anyway. Thank you very much!!!

  • If useful mark as answer!

  • All right! Thanks a lot

-1

CNPJ function with javascript

document.getElementById('cnpj').addEventListener('input', function(e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,4})(\d{0,2})/);
  e.target.value = !x[2] ? x[1] : x[1] + '.' + x[2] + '.' + x[3] + '/' + x[4] + (x[5] ? '-' + x[5] : '');
});
<input id="cnpj" />

CPF function with jQuery

$('.cpf').mask('000.000.000-00', {reverse: true});

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.