08.03.2025

Desabilitando Sugestões de Autocompletar em Campos de Formulário HTML: Como Fazer

Resposta Rápida

Se você está sem tempo, sugiro usar o atributo autocomplete="off" na sua tag HTML para desabilitar as sugestões de autocompletar:

<input type="text" autocomplete="off">

Para uma proteção maior contra o autocompletar nas versões atuais dos navegadores, é recomendável usar autocomplete="new-password" em campos de entrada de senha:

<input type="password" autocomplete="new-password">

Autocompletar: A Vontade do Navegador

Lidar com o autocompletar não é uma tarefa simples, pois os navegadores podem ignorar as tentativas de desabilitá-lo. Vamos discutir várias abordagens que podem ajudar.

O Atributo autocomplete="off"

O atributo autocomplete="off" pode ser seu primeiro passo na luta contra o autocompletar. No entanto, esteja ciente de que alguns navegadores podem contornar isso ao preencher campos de login e senha em um esforço para melhorar a experiência do usuário.

autocomplete="new-password"

Esse atributo informa aos navegadores que estão lidando com um campo de nova senha, o que ajuda a prevenir o autocompletar. Navegadores baseados no motor Chromium, Safari e versões recentes do Firefox suportam esse método.

Assistência em JavaScript

Se o uso do HTML não funcionou, você precisará recorrer ao JavaScript. Você pode alterar programaticamente o atributo ou limpar campos com manipuladores de eventos:

document.getElementById('meuInput').addEventListener('focus', function() {
    this.setAttribute('autocomplete', 'off');
    this.value = '';
});

Jogando o Jogo da "Substituição" para Campos de Pesquisa

Se você atribuir ao campo type="search", isso também pode ajudar a eliminar o autocompletar indesejado. No entanto, isso pode mudar o comportamento do teclado em dispositivos móveis e adicionar um botão de limpeza ao campo.

React e Autocompletar

Em React, a situação é semelhante ao HTML normal; no entanto, você deve usar autoComplete em camelCase para JSX:

<input
  type="text"
  name="usuario"
  autoComplete="off"
  value={this.state.value}
  onChange={this.handleChange}
/>

Autocompletar: A História Complica…

"Funcionalidades" do Navegador

Usar autocomplete="new-password" para campos críticos pode também levar os navegadores a oferecer ferramentas adicionais, como geração de senha.

"Readonly" como um Truque

O atributo readonly pode proteger os campos do autocompletar até que sejam ativados, após o que pode ser desativado usando JavaScript:

<input type="text" name="usuario" readonly onfocus="this.removeAttribute('readonly');">

Uso Responsável

Lembre-se do conforto dos usuários: o autocompletar pode simplificar muito a entrada de dados, então desabilite-o com cautela.

Visualização

Tente ilustrar como o mecanismo de autocompletar funciona e como desativá-lo usando uma metáfora clara:

Antes de aplicar autocomplete="off":
- Formulário HTML: "Você quer compartilhar algo?"
- Entrada de Dados: [__🔍__]

Após aplicar autocomplete="off":
- Formulário HTML: "Agora você está em silêncio!"
- Entrada de Dados: [________]

O atributo autocomplete="off" tem a capacidade de esconder os segredos mais profundos da memória do navegador.

A Arte de Mascarar: A Abordagem do "Espião"

Ao usar autocomplete="off", recomenda-se:

Teste em Diferentes Plataformas

Verifique a compatibilidade da sua solução testando em vários navegadores e dispositivos.

Monitoramento de Informações

Fique atualizado sobre mudanças na MDN Web Docs e discussões em Chromium Bugs para estar ciente das últimas alterações em relação ao comportamento do autocompletar.

Recursos Úteis: Informe de Inteligência

1. MDN Web Docs - Atributo Autocomplete.
2. Padrão HTML.
3. Discussão no Stack Overflow.
4. w3schools: Tutorial de Autocompletar.
5. Suporte a Navegadores.

Video

Navigation