# Mobile-first: Como otimizar a validação de CPF em dispositivos móveis > Aprenda técnicas mobile-first para otimizar formulários de CPF em dispositivos móveis. Máscara de input, teclado numérico, UX e performance. **Publicado:** 01/03/2026 **Autor:** Redação CPFHub.io **URL:** https://cpfhub.io/blog/mobile-first-validacao-cpf-dispositivos-moveis --- Otimizar a validação de CPF para mobile exige teclado numérico forçado, máscara de input automática, validação progressiva dos dígitos verificadores antes do submit e feedback visual durante a consulta à API — tudo calibrado para redes instáveis e touch targets de pelo menos 44px. ## Introdução Mais de 70% dos acessos a aplicações web no Brasil acontecem via dispositivos móveis. Se o seu formulário de cadastro ou checkout exige o CPF do usuário, a experiência mobile precisa ser fluida, rápida e sem fricção. Um campo de CPF mal implementado em mobile pode aumentar significativamente a taxa de abandono. As diretrizes de acessibilidade do [W3C](https://www.w3.org/WAI/WCAG21/quickref/) reforçam que campos de formulário devem ter tamanho e comportamento adequados para uso em telas sensíveis ao toque. --- ## 1. Teclado numérico O CPF é composto apenas por números. Force o teclado numérico no mobile: ```html ``` **Por que `type="tel"` e não `type="number"`?** * `type="number"` pode adicionar setas de incremento/decremento. * `type="tel"` exibe o teclado numérico sem elementos desnecessários. * `inputmode="numeric"` reforça o comportamento em navegadores modernos. --- ## 2. Máscara de input automática Aplique a formatação 000.000.000-00 enquanto o usuário digita: ```javascript document.getElementById('cpf').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; }); ``` A máscara ajuda o usuário a confirmar visualmente que digitou corretamente, reduzindo erros. --- ## 3. Validação progressiva Em mobile, evite exibir erros só depois do submit. Valide progressivamente: 1. **Durante a digitação** — Aplique máscara e conte dígitos. 2. **Ao sair do campo (blur)** — Valide dígitos verificadores localmente. 3. **Ao submeter** — Consulte a API para validação real. ```javascript document.getElementById('cpf').addEventListener('blur', function(e) { const cpf = e.target.value.replace(/\D/g, ''); const feedback = document.getElementById('cpf-feedback'); if (cpf.length < 11) { feedback.textContent = 'CPF incompleto'; feedback.className = 'erro'; } else if (!validarDigitos(cpf)) { feedback.textContent = 'CPF invalido'; feedback.className = 'erro'; } else { feedback.textContent = 'Formato OK'; feedback.className = 'sucesso'; } }); ``` --- ## 4. Tamanho do campo e touch target Garanta que o campo tenha tamanho adequado para toque: ```css input#cpf { font-size: 18px; padding: 14px 16px; border: 2px solid #ccc; border-radius: 8px; width: 100%; box-sizing: border-box; -webkit-appearance: none; } input#cpf:focus { border-color: #0066cc; outline: none; } ``` * Mínimo de **44px de altura** para touch targets (recomendação Apple/Google). * **Font-size 16px+** para evitar zoom automático no iOS. * **Largura 100%** para responsividade. --- ## 5. Feedback visual durante a consulta à API Enquanto a API da CPFHub.io processa a consulta (~900ms), mostre feedback visual claro: ```css .loading-indicator { display: inline-block; width: 16px; height: 16px; border: 2px solid #ccc; border-top-color: #0066cc; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } ``` Exiba ao lado do campo ou como overlay do botão de submit. --- ## 6. Performance em redes lentas Em conexões 3G/4G instáveis, considere: * **Timeout adequado** — Configure 10 segundos de timeout na chamada à API. * **Retry automático** — Uma tentativa adicional em caso de falha de rede. * **Feedback de estado** — "Consultando...", "Tentando novamente...", "Falha na conexão". * **Offline-first** — Permita que o formulário seja preenchido offline e valide o CPF quando a conexão retornar. --- ## 7. Acessibilidade mobile * Use `aria-label` descritivo no campo. * Associe labels com `for`/`id`. * Forneça mensagens de erro claras e acessíveis via `aria-live`. * Teste com VoiceOver (iOS) e TalkBack (Android). ```html CPF ``` --- ## Perguntas frequentes ### Por que usar `type="tel"` em vez de `type="number"` para o campo de CPF? O `type="number"` exibe setas de incremento/decremento em desktop e pode tratar zeros à esquerda de forma inesperada em alguns navegadores. O `type="tel"` combinado com `inputmode="numeric"` abre o teclado numérico no iOS e Android sem esses efeitos colaterais, tornando a digitação mais direta e menos propensa a erros. ### Qual o tamanho mínimo recomendado para o campo de CPF em mobile? O touch target deve ter pelo menos 44px de altura, conforme as diretrizes da Apple e do Google. O font-size deve ser 16px ou maior para evitar o zoom automático que o iOS aplica em campos menores. Padding interno de 14px vertical e 16px horizontal garante área de toque confortável sem aumentar excessivamente o formulário. ### Como implementar validação offline do CPF antes de chamar a API? Implemente a verificação dos dígitos verificadores localmente, no evento `blur` do campo. O algoritmo calcula os dois últimos dígitos a partir dos nove primeiros e compara com o que foi digitado. Essa validação elimina CPFs matematicamente inválidos antes de qualquer chamada de rede, economizando consultas de API e acelerando o feedback para o usuário. ### Quanto tempo a API demora para responder em condições de rede mobile? A API da CPFHub.io responde em ~900ms em condições normais de rede. Para redes 3G mais lentas, configure um timeout de 10 segundos e implemente pelo menos uma tentativa de retry automático. Mostre ao usuário os estados "Consultando...", "Tentando novamente..." e "Falha na conexão" para que ele entenda o que está acontecendo sem frustração. ### Leia também - [Responsividade em formulários de CPF: desktop, tablet e mobile](https://cpfhub.io/blog/responsividade-em-formularios-de-cpf-desktop-tablet-e-mobile) - [Como usar Progressive Web App (PWA) para validação de CPF offline-first](https://cpfhub.io/blog/como-usar-progressive-web-app-pwa-para-validacao-de-cpf-offline-first) - [Como pedir CPF no checkout sem espantar o cliente](https://cpfhub.io/blog/como-pedir-cpf-no-checkout-sem-espantar-o-cliente) - [API de CPF grátis para desenvolvedores: como começar em 5 minutos](https://cpfhub.io/blog/api-cpf-gratis-desenvolvedores-comecar-5-minutos) --- ## Conclusão Otimizar a validação de CPF para mobile é uma decisão que impacta diretamente a taxa de conversão de cadastros e checkouts. Teclado numérico forçado, máscara de input automática, validação progressiva dos dígitos verificadores e feedback visual durante a consulta são técnicas simples que eliminam os principais pontos de abandono em formulários mobile. Combinadas com a resposta de ~900ms da [**CPFHub.io**](https://www.cpfhub.io/), essas boas práticas garantem uma experiência fluida mesmo em conexões instáveis. Comece com 50 consultas gratuitas por mês, sem cartão de crédito, em [cpfhub.io](https://www.cpfhub.io/).