# Como Usar Máscara de Input para CPF e Melhorar a Experiência do Usuário
> Aprenda a implementar máscaras de input para CPF que melhoram a experiência do usuário, reduzem erros de digitação e aumentam a taxa de conversão.
**Publicado:** 18/07/2024
**Autor:** Redação CPFHub.io
**URL:** https://cpfhub.io/blog/mascara-input-cpf-experiencia-usuario
---
Uma máscara de input para CPF aplica automaticamente a formatação `XXX.XXX.XXX-XX` conforme o usuário digita, reduz erros de preenchimento em até 70% e elimina a necessidade de instrução explícita sobre o formato. Combinada com validação em tempo real e feedback visual, transforma o campo de CPF em um elemento fluido do formulário — em vez de um ponto de abandono.
## Introdução
O campo de CPF é um dos mais preenchidos em formulários brasileiros, presente em cadastros, checkouts e sistemas governamentais. Apesar disso, muitos sites ainda apresentam campos sem máscara, sem validação em tempo real e sem feedback visual, resultando em erros de digitação, frustração e abandono de formulários. Uma máscara de input bem implementada transforma o preenchimento de CPF em uma experiência fluida e intuitiva.
---
## Por que a máscara de CPF importa
O CPF possui 11 dígitos numéricos, que sem formatação visual tornam-se difíceis de verificar. A máscara no formato `XXX.XXX.XXX-XX` oferece benefícios diretos.
| Problema sem máscara | Solução com máscara |
|---|---|
| Usuário digita letras por engano | Input aceita apenas números |
| Difícil conferir 11 dígitos seguidos | Pontos e traço segmentam visualmente |
| Usuário não sabe quantos dígitos faltam | Formato guia a quantidade esperada |
| Erros só aparecem no envio | Validação em tempo real durante digitação |
| Copiar/colar com formatação quebra | Máscara trata valores colados |
**Redução de erros** -- a máscara impede a entrada de caracteres inválidos, reduzindo erros de digitação em até 70%.
**Feedback imediato** -- o usuário sabe instantaneamente se o CPF está no formato correto.
**Acessibilidade** -- a segmentação visual ajuda usuários com dificuldades de leitura a conferir os números.
---
## Implementação com JavaScript puro
A implementação mais leve e sem dependências utiliza JavaScript puro para aplicar a máscara.
```javascript
function aplicarMascaraCPF(input) {
input.addEventListener("input", function (e) {
let valor = e.target.value.replace(/\D/g, "");
if (valor.length > 11) {
valor = valor.slice(0, 11);
}
if (valor.length > 9) {
valor = valor.replace(
/(\d{3})(\d{3})(\d{3})(\d{1,2})/,
"$1.$2.$3-$4"
);
} else if (valor.length > 6) {
valor = valor.replace(
/(\d{3})(\d{3})(\d{1,3})/,
"$1.$2.$3"
);
} else if (valor.length > 3) {
valor = valor.replace(/(\d{3})(\d{1,3})/, "$1.$2");
}
e.target.value = valor;
});
// Tratar colagem de valores
input.addEventListener("paste", function (e) {
e.preventDefault();
const textoColado = (e.clipboardData || window.clipboardData)
.getData("text");
const apenasNumeros = textoColado.replace(/\D/g, "").slice(0, 11);
input.value = apenasNumeros;
input.dispatchEvent(new Event("input"));
});
}
// Uso
const campoCPF = document.getElementById("cpf");
aplicarMascaraCPF(campoCPF);
```
---
## Validação em tempo real com feedback visual
Além da máscara, a validação em tempo real com feedback visual melhora significativamente a experiência.
```html
```
```javascript
function validarCPFComFeedback(input, feedbackEl) {
input.addEventListener("input", function () {
const cpfLimpo = input.value.replace(/\D/g, "");
if (cpfLimpo.length < 11) {
input.classList.remove("valido", "invalido");
feedbackEl.textContent = "";
return;
}
if (validarDigitosCPF(cpfLimpo)) {
input.classList.add("valido");
input.classList.remove("invalido");
feedbackEl.textContent = "CPF válido";
feedbackEl.className = "feedback sucesso";
} else {
input.classList.add("invalido");
input.classList.remove("valido");
feedbackEl.textContent = "CPF inválido. Verifique os números.";
feedbackEl.className = "feedback erro";
}
});
}
```
| Estado | Classe CSS | Cor da borda | Mensagem |
|---|---|---|---|
| Digitando | Nenhuma | Padrão | Nenhuma |
| CPF válido | `.valido` | Verde (#22c55e) | "CPF válido" |
| CPF inválido | `.invalido` | Vermelho (#ef4444) | "CPF inválido. Verifique os números." |
---
## Boas práticas de acessibilidade
A acessibilidade é fundamental para que todos os usuários possam preencher o campo de CPF sem dificuldades.
**Atributo `inputmode="numeric"`** -- exibe o teclado numérico em dispositivos móveis sem restringir o tipo do input a `number`.
**Label visível e associado** -- usar `