Tenho meus input de email/senha. Mas sempre ao digitar um email a qual eu já tenho salvo login/senha, o navegador preenche automaticamente no meu formulário.
Como resolver?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEm princípio, a solução seria simples, colocar o autocomplete="off"
tanto no form
quanto no input
:
<form name="meuform" id="meuform" method="post" autocomplete="off" action="">
<input type="text" name="batatinha" autocomplete="off">
Lembrando que autocomplete
é HTML5
, não se esqueça de trabalhar com o doctype
correto no topo da página:
<!DOCTYPE html>
Mas como já dito nos comentários e em outras fontes, nem todos os browsers reagem da mesma forma. Para isto, há uma série de saídas e reparos técnicos 1 a se considerar:
Uma delas, é acrescentar dois campos escondidos por CSS logo no começo do form:
<form name="meuform" id="meuform" method="post" autocomplete="off" action="">
<input type="text" style="display:none">
<input type="password" style="display:none">
Alguns browsers entendem que por ter dois campos senha, o formulário é de troca de senha, então ignoram o autocomplete.
Outra é preencher o form com "nada" usando JS ou JQuery, por exemplo:
$(document).ready(function(){ $('input[type="text"], select').val('') });
Alternativamente, você pode randomizar os names
e id
s do form com alguma linguagem server-side.
Algumas extensões e password managers ignoram completamente o atributo autocomplete
.
Considere a usabilidade, e os reais motivos de desabilitar esta função. Provavelmente você tem uma boa razão para evitar o autocomplete, mas não se esqueça de pensar em todos os prós e contras.
Para os casos em que você queira o autocomplete em um campo só (nos browsers que respeitam o autocomplete, claro, dá pra "desligar" no form
todo e "ligar" no campo desejado:
<form autocomplete="off">
<input name="username">
<input name="password" type="password">
<input name="another_field" autocomplete="on">
<input type="text" name="email" autocomplete="off" />
autocomplete="off"
funciona com qualquer campo do tipo input
, assim como textarea
s.
22/09/2014 às 20:05
<form>
, ou seja <form autocomplete="off"
Resolvi da seguinte maneira:
<input type="text" id="matricula" placeholder="Matrícula" name="mat" required
autofocus autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
<input type="password" id="senha" placeholder="Senha" name="pass" required
autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
onBlur="this.setAttribute('readonly', true);" />
Espero ter ajudado.
Eu observei o seguinte, no internet explorer não funciona direito, adicionei uma ação a mais:
<input type="text" id="matricula" placeholder="Matrícula" name="mat" required
autofocus autocomplete="off" readonly onfocus="this.removeAttribute('readonly');this.select();" />
<input type="password" id="senha" placeholder="Senha" name="pass" required
autocomplete="off" readonly onfocus="this.removeAttribute('readonly');this.select();" />
Não vi necessidade do evento onBlur, funcionou perfeitamente, testei, mas não houve efeito, como desenvolvo também para mobile, o funcionamento ocorreu normalmente.
Eu ainda fui além, usando jquery, consegui manter a cor natural do campo, que geralmente é branca, com o seguinte comando:
$("#matricula").css('background-color', '#ffffff');
$("#senha").css('background-color', '#ffffff');
passei pelo mesmo problema, hoje 10/09/2019 única solução que encontrei foi essa
colocar 2 inputs falsos antes do seu input
<input class="hidden" type="text" style="display: none!important; visibility: hidden!important;" ></input>
<input class="hidden" type="password" style="display: none!important; visibility: hidden!important;" ></input>