06.03.2025

Desativando o Preenchimento Automático no Chrome: Uma Solução para o Problema

Resposta Rápida

Para desativar o preenchimento automático no navegador Chrome, você pode utilizar as seguintes abordagens:

• Adicionar um campo oculto com um nome gerado aleatoriamente e o atributo autocomplete="new-password".
• Aplicar o atributo autocomplete="off" ao campo de entrada atual.

<input type="text" name="foo" autocomplete="new-password" style="display:none;">
<input type="text" name="bar" autocomplete="off">

É importante lembrar que soluções como essas podem ser pouco confiáveis considerando futuras atualizações do navegador.

Usando o Atributo autocomplete

O atributo autocomplete melhora a usabilidade dos formulários, mas em casos onde o preenchimento automático não é necessário, é essencial saber como desativá-lo.

Para Campos de Senhas de Uso Único

Para evitar o preenchimento automático em campos de senhas de uso único (OTP), você pode usar a seguinte estrutura:

<input type="text" autocomplete="one-time-code">

Como Evitar o Preenchimento Automático para Campos de Endereço

Para campos com informações de endereço, você pode usar esta abordagem:

<input type="text" autocomplete="new-user-street-address"><!-- Isso não significa que o endereço é inventado! -->

Uso Criativo de Valores Não Padrão

Você pode experimentar valores incomuns para o atributo autocomplete, por exemplo:

<input type="text" id="campo1" autocomplete="do-not-autofill"><!-- A palavra "não" realmente faz a diferença aqui! -->

Visualização

Veja como o trabalho com formulários no Chrome mudará após desativar o preenchimento automático:

Antes das Alterações                  Depois das Alterações
─────────────────────────────     ─────────────────────────────
🧙‍♂️📝 [ Nome de Usuário ]         ✋🧙‍♂️📝 [ Nome de Usuário ]
🧙‍♂️🔑 [ Senha ]                  ✋🧙‍♂️🔑 [ Senha ]
//Preenchimento automático ativo   //Preenchimento automático desativado

Abordagem para desativar o preenchimento automático no Chrome:

<input type="text" name="email" autocomplete="off" />
<input type="password" name="password" autocomplete="new-password" />

Previna o preenchimento automático como Neo de "Matrix" usando autocomplete="off" e autocomplete="new-password".

Mantenha-se Alerta e Ignore o Preenchimento Automático

Parece que o recurso de preenchimento automático no Chrome não capta dicas, então você precisa estar atento e aplicar as seguintes estratégias.

Campos Falsos Ocultos e Inacessíveis

Inclua campos ocultos ou visualmente inacessíveis no formulário:

<input type="text" style="position:absolute; top:-500px"><!-- Ainda procurando o Waldo -->

Campos Somente de Leitura

Os campos podem ser definidos como somente leitura por padrão e se tornar editáveis ao interagir com o usuário:

document.getElementById('meuInput').addEventListener('focus', (event) => {
  event.target.readOnly = false; // O campo se torna editável ao receber foco
});

Deixe o Controle com o Usuário

Certifique-se de que os usuários saibam como ajustar as configurações de preenchimento automático em seu navegador. Apenas ter um navio não faz de alguém um capitão.

Carregamento Dinâmico de Elementos

Se todos os métodos mencionados falharem, você pode tentar usar JavaScript para contornar o preenchimento automático:

setTimeout(function() {
  document.getElementById('campoDinâmico').style.display = 'block'; // O campo se torna visível na tela 
}, 1000);

Recursos Úteis

1. MDN Web Docs: :autofill - CSS: Folhas de Estilo em Cascata
2. Stack Overflow: Desativando o Preenchimento Automático no Chrome
3. Padrão HTML
4. W3Schools: Atributo Autocomplete de Entrada HTML
5. Google Developers Web Fundamentals: Preenchimento Automático
6. CanIUse: Tabelas de Compatibilidade para HTML5, CSS3, etc.
7. Web.dev: Preenchimento Automático

Video

Navigation