Desenvolvimento • Scriptcase Desabilitando o preenchimento automático e autocomplete do navegador Chrome em telas de login

Olá. Aqui pretendo mostrar uma alternativa para desabilitar o preenchimento automático e o autocomplete do navegador chrome em telas de login.

O que se observa é que o navegador Chrome, já há algum tempo, não tem respeitado mais o atributo autocomplete=off nos elementos input.
Decidi iniciar uma  busca por um código que tornasse possível ‘driblar’ essa configuração do Chrome, e, depois de uma longa pesquisa na internet e diversos testes, onde várias dicas não funcionam e outras até funcionam mas não eram adaptáveis ao Scriptcase, consegui chegar a uma opção ajustável!

A sugestão a seguir inibirá a janela flutuante com senhas salvas, o preenchimento automático e o fundo amarelo da janela Login e Senha.

Abaixo, imagem de uma tela de login sem aplicação da desativação do autocomplete:

Vamos ao código:

A editar a aplicação pela IDE do Scriptcase, temos do lado direito a opção Javascript, logo abaixo de SQL.
Selecione o objeto: Form e o evento: onLoad, clique em editar e adicione o seguinte código:

$(':input').attr('autocomplete','off');  //adicionando o atributo autocomplete com valor off a todos elementos input.
$("#login_troca").val(''); //esvaziando o valor do elemento input de id login_troca.
$("#pswd_troca").val(''); //esvaziando o valor do elemento input de id pswd_troca.
setTimeout(function(){ //iniciando um temporizador onde o código abaixo será executado após 500 milisegundos
$("#login_troca").css('display','none'); //escondendo o elemento de id login_troca
$("#pswd_troca").css('display','none'); ////escondendo o elemento de id pswd_troca
}, 500);

** Não esqueça de salvar o código. **

Agora vamos aos campos login e pswd (nome dos campos sugeridos nesse exemplo).

Nas propriedades do campo login colocaremos o seguinte valor para a propriedade Label do campo:

<input id="login_troca" type="text" name="login" size="1" width="1" height="" autocomplete="off" style=" z-index: -1000; height: 1px; width: 1px;     border: none; position:absolute; ">Login

O mesmo para o Label do campo pswd :

<input id="pswd_troca" type="password" name="pswd" size="1" autocomplete="off" style="z-index: -1000; height: 1px; width: 1px; border: none;     position: absolute; ">Senha

O Atributo Style com suas propriedades e valores adicionados inline são apenas para deixar o elemento input  o menos perceptível possível.

Pronto! Salve e teste a aplicação.

Explicando:

O Chrome atribuirá ao primeiro elemento de name=”NAME” o autopreenchimento. O que fizemos? Duplicamos o elemento de name=”NAME” e o tornamos transparente e após meio segundo da carga da página escondemos esse campo. Isso engana o Navegador, fazendo com que ele atribua o autocomplete ao primeiro campo de name=”NAME” encontrado, não atribuindo o autocomplete para o segundo elemento de mesmo name.

É uma solução de contorno que alivia essa desagradável opção nas telas de login, deixando também a tela de login mais leve sem as janelas com fundo amarelo com autopreenchimento.

Bem, essa foi alternativa que descobri para ‘resolver’ essa questão do autocomplete e auto preenchimento automático no Chrome , ajustável ao nosso Scriptcase claro.

Espero que lhe seja útil assim como foi para mim!

Ah! Mas uma coisa, caso você ainda não conheça o Scriptcase, te convido a fazer o download e experimentar esta ferramenta.

Veja todos os nossos posts aqui: ScriptcaseBlog