Detecção de preenchimento automático do navegador: um guia detalhado

O preenchimento automático é um recurso conveniente que os navegadores oferecem para preencher rapidamente campos de formulário com informações pré-salvas . Embora isso possa simplificar a experiência do usuário, representa um desafio para os desenvolvedores que buscam rastrear ou desativar o preenchimento automático em cenários específicos.

Quando o preenchimento automático acontece?

O momento do preenchimento automático o preenchimento automático varia de acordo com o navegador e o tipo de campo de entrada.

• Para campos de nome de usuário/senha:

  • Firefox 4, IE 7 e IE 8: não para acionar eventos de alteração no preenchimento automático.
  • Safari 5 e Chrome 9: aciona eventos de alteração.

• Para outros campos do formulário:

  • IE 7 e IE 8: não aciona eventos de alteração.
  • Firefox 4: aciona eventos de alteração quando os usuários selecionam em uma lista de sugestões e saem.
  • Chrome 9: não aciona eventos de alteração.
  • Safari 5: aciona eventos de alteração.

Como detectar o preenchimento automático

Detectando o preenchimento automático não é simples devido a inconsistências do navegador. Aqui estão algumas opções:

• Desativar preenchimento automático: Desative o preenchimento automático para campos específicos usando "autocomplete='off'" em HTML.
• Periodicamente Verifique o valor do campo: Verifique regularmente o valor do campo de entrada para determinar se ele foi preenchido automaticamente.

• Trigger Event Listener: Alguns navegadores acionam eventos no preenchimento automático:

  • Chrome: use o evento "input" (por exemplo, ).
  • Firefox: use o evento "change" para alguns campos do formulário .

Considerações específicas do navegador:

• Firefox:

  • O preenchimento automático aciona um evento de alteração para alguns campos.
  • O complemento Monitor de desempenho pode ser usado para medir o desempenho do preenchimento automático.

• Chrome:

  • Aciona um evento "input" no preenchimento automático.
  • Não suporta a propriedade "autocomplete" do CSS.

• Safari:

  • Aciona eventos de mudança para alguns campos.
  • Suporta a propriedade "autocomplete".

Recursos adicionais:

• [Guia de capacidade de preenchimento automático do W3C](https://www.w3.org/TR/html-dev/forms.html#autofill)
• [Detectando o preenchimento automático em navegadores](https: //blog.bitdefender.com/web-client/detecting-autofill-in-browsers/)