Depois de enviar o formulário no navegador, o navegador geralmente solicitará "Você precisa lembrar a senha?" Após a confirmação, certas caixas de entrada serão preenchidas automaticamente na próxima vez que o formulário for enviado.
No entanto, em alguns cenários (como nas páginas de saque e recarga), o preenchimento automático de senhas é muito inseguro. Alguns meios são necessários para impedir o preenchimento automático do navegador.
Encontrei algumas armadilhas durante o processo de solução.
Como o recurso de preenchimento automático é implementado pelo próprio navegador, o atributo de preenchimento automático não foi gravado na especificação W3C. Muitos navegadores simplesmente ignorarão esse atributo. O preenchimento automático não pode ser desativado.
É natural pensar em uma maneira de usar js para definir o valor de entrada como vazio quando a página é carregada, mas o preenchimento automático do navegador é realmente preenchido após a execução do js. . . Depois de usar js para definir o valor da entrada como vazio, o navegador preencheu automaticamente a entrada, o que não resolveu o problema.
Um método amplamente divulgado na Internet. Este método é viável na maioria das versões de navegadores, mas não funciona em algumas versões superiores de navegadores e no Safari. Vários métodos introduzidos posteriormente são baseados em melhorias deste método.
<!-- Entrada adicional --> <input type="senha" style="display:none"/> <!-- Entrada original --> <input type="senha"/>
Este método resolve o problema de preenchimento automático no Safari em comparação com o anterior. Mas não funciona em algumas versões superiores do Chrome. (Após o teste, o Chrome 46.0 funciona, o Chrome 47.0 falha)
<!-- Formulário e entrada adicionais --> <form style="display:none"> <input type="senha"/> </form> <!-- Entrada original --> <input type="senha"/>
Esta solução combina os dois métodos acima e finalmente resolve o problema de preenchimento automático no Chrome 47.0.
<!--Conteúdo adicional--> <form style="display:none"> <input type="senha"/> </form> <input type="senha" style="largura:0;altura:0;float:esquerda;visibilidade:oculto"/> <!-- Entrada original --> <input type="senha"/>
O que precisa ser observado neste método é que a entrada que é da mesma geração da entrada de destino não pode ser definida como display:none. Se estiver definido, será preenchido automaticamente no Chrome 47.0, portanto, você só poderá usar outros meios. para ocultar esta entrada.
Depois de usar a última solução, ela funciona bem em vários navegadores, não sendo encontrado nenhum preenchimento automático por enquanto. Com certeza, problemas de compatibilidade de front-end sempre foram algo nojento. .
Isso conclui este artigo sobre como o HTML resolve o problema de lembrar caixas de entrada de senha em navegadores. Para obter mais informações sobre como lembrar caixas de entrada de senha em HTML, pesquise artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. downcodes.com mais no futuro!