MENU Mário Valney

Como remover o autocomplete do campo de nova senha no Chrome?

Front 24 de julho de 2019 0 comentários
Front
  • 24 - 07 - 19
  •        
  • 0

Se você já criou um formulário na vida, sabe que o Google Chrome costuma ignorar o atributo autocomplete quando o assunto é o campo de senha.

Várias questões no Stackoverflow (essa e essa, por exemplo) e até relatórios de bugs foram escritos nesse sentido. Sem falar que várias gambiarras foram criadas…

O input escondido

A solução já foi criar um campo escondido:

<input style="display:none">
<input type="password" style="display:none">

Um tempo depois o Chrome começou a ignorar campos com display: none e a alternativa foi esconder de outras formas:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

A forma certa

No entanto, existe uma especificação HTML bem clara sobre o uso do atributo autocomplete: veja.

Resumindo, você pode adicionar um valor de grupo (para a seção de campos), como, por exemplo, section-my-form-section. Basta que ele comece com section-.

Logo depois pode vir (separado por espaços) shipping ou billing (util no caso de tipos de endereços distintos). E por fim, a descrição do campo em si:

Então, para resolver nosso problema, basta adicionar autocomplete=”new-password” no seu input.

<label>Senha:
    <input name="password" type="password" autocomplete="new-password">
</label>

Conclusão

E é isso aí, pessoal.

Espero ter ajudado e, se você estiver criando um formulário, que tal adicionar todos esses valores para o autocomplete proporcionando um experiência muito melhor para seu usuário?

Alguma dica ou comentário?
Escreva abaixo e faça um DEV feliz.

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preocupe: não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.