Como posso criar máscara via js puro?

Front-end JavaScript
, ,
#1

Como posso criar uma máscara para rg cpf e telefone via javascript puro e de maneira simples?

#2

Você pode utilizar o replace junto de uma expressão regular para formatar a String com a mascara que você deseja, aqui tem um exemplo com o CPF:

"12345678910".replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, "$1.$2.$3-$4") // saida: '123.456.789-10'
#4

Ele cria a máscara mas como eu faço para substituir o valor dentro de um input por meio deste método?

#5

Usa o evento ‘oninput’ e altera o ‘value’ do input pelo valor dele com a máscara.

#6

Ok, eu encontrei um problema quando eu tento pegar o valor do input e colocar o replace me da um erro de console que diz, função inválida, eu faço oque para remover está mensagem?

#7

Como está o codigo agora?

#8 
cpfInput = document.querySelector("#cpf-usuario");

var cpfFormatado = cpfInput.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, "$1.$2.$3-$4")

cpfInput.value = cpfFormatado;
#9

Você deve usar o replace no cpfInput.value e não direto no cpfInput:

var cpfFormatado = cpfInput.value.replace(
  /(\d{3})(\d{3})(\d{3})(\d{2})/g,
  '$1.$2.$3-$4'
)
1 curtida
#10

Entendi

#11

Mais uma pergunta, como posso fazer isso em tempo real, por exemplo assim que der os 3 primeiros números ele já coloca o ponto e assim por diante?

#12

Essa é uma forma de fazer, mas acho que ela está longe de ser a ideal, tenta dar uma pesquisada para melhorar isso:

var cpfInput = document.querySelector('#cpf-usuario')

var value = cpfInput.value.replace(/[^\d]+/g, '').replace(' ', '')
var searchValue
var replaceValue

switch (value.length) {
  case 3:
    searchValue = /(\d{3})/g
    replaceValue = '$1.'
    break
  case 4:
    searchValue = /(\d{3})(\d{1})/g
    replaceValue = '$1.$2'
    break
  case 5:
    searchValue = /(\d{3})(\d{2})/g
    replaceValue = '$1.$2'
    break
  case 6:
    searchValue = /(\d{3})(\d{3})/g
    replaceValue = '$1.$2.'
    break
  case 7:
    searchValue = /(\d{3})(\d{3})(\d{1})/g
    replaceValue = '$1.$2.$3'
    break
  case 8:
    searchValue = /(\d{3})(\d{3})(\d{2})/g
    replaceValue = '$1.$2.$3'
    break
  case 9:
    searchValue = /(\d{3})(\d{3})(\d{3})/g
    replaceValue = '$1.$2.$3-'
    break
  case 10:
    searchValue = /(\d{3})(\d{3})(\d{3})(\d{1})/g
    replaceValue = '$1.$2.$3-$4'
    break
  case 11:
    searchValue = /(\d{3})(\d{3})(\d{3})(\d{2})/g
    replaceValue = '$1.$2.$3-$4'
    break

  default:
    break
}

var cpfFormatado = value.replace(searchValue, replaceValue)

cpfInput.value = cpfFormatado
1 curtida
#13

Obrigado

1 curtida
#14

Em vez do switch sugerido acima, daria para “simplificar” um pouco:

function format(cpf) {
    cpf = cpf.replace(/\D/g, ''); // remove tudo que não é número
    if (cpf.length > 11) { // tem mais dígitos que um CPF, o que fazer?
        // poderia dar erro, mas estou pegando os 11 primeiros e ignorando o resto
        cpf = cpf.substring(0, 11);
    }
    var dv = cpf.substring(9); // se tem dígitos verificadores, inclui o hífen
    if (dv.length > 0) {
        dv = '-' + dv;
    }

    return cpf.substring(0, 9).split(/(?=(?:\d{3}){0,3}$)/).join('.') + dv;
}

// depois é só substituir no input
var cpfInput = document.querySelector('#cpf-usuario');
cpfInput.addEventListener('input', function() {
    cpfInput.value = format(cpfInput.value);
});

O addEventListener('input' faz com que a função format seja chamada toda vez que o valor do input mudar (seja quando você digitar algo, ou quando colar com Ctrl+V, por exemplo).

Apesar de ter ficado mais sucinto, a regex /(?=(?:\d{3}){0,3}$)/ é - na minha opinião - um pouco mais complicada de entender - se quiser saber mais, o funcionamento está explicado aqui.

Outra forma de resolver é não usar regex e construir a string manualmente, bastando saber em quais posições devem ser colocados o ponto e o hífen:

function format(cpf) {
    cpf = cpf.replace(/\D/g, ''); // remove tudo que não é número
    // vai no máximo até 11 dígitos (se o CPF tiver mais, são ignorados)
    var tamanho = Math.min(11, cpf.length);
    var result = '';
    // mapeia as posições e respectivo caractere que vai depois
    var subs = { 2: '.', 5: '.', 8: '-' };
    for (var i = 0; i < tamanho; i++) {
        result += cpf[i];
        // se a posição deve ter um caractere depois (mas não é a última)
        if (i in subs && i != tamanho - 1) {
            result += subs[i];
        }
    }
    return result;
}
2 curtidas
#15

Puxa, obrigado

#16

E como ficaria uma máscara para rg? Rg tem vários formatos diferentes

#17

E telefone :sweat_smile:

#18

RG é uma bagunça, em cada estado é de um jeito, e até no mesmo estado pode ter diferença de acordo com a época.

Não tem como fazer uma máscara universal, uma solução seria primeiro ter um select pra escolher o estado, e depois aplicar a respectiva máscara.

#19

Entendi