Design & UX • Development • Scriptcase Disabling autofill and autocomplete Chrome browser in login screens

Hello, here I want to show an alternative to disable the autofill and autocomplete of the chrome browser in login screens.

What we observe is that the Chrome browser, for some time, has not respected the attribute autocomplete = off in the input elements.

So I decided to start searching for something that would make it possible to skip this configuration of Chrome, and after a long search on the internet and various tests, where several tips do not work and others even worked but were not easily adapted to Scriptcase, I was able to come up with an adjustable option!

The following suggestion will inhibit the floating window with saved passwords, the autocomplete, and the yellow background of the Login and Password window.

Below, the image of a login screen without autocomplete deactivation application:

Let’s code it:

To edit the application through the Scriptcase IDE, at the right side, we have the Javascript option, right beneath the SQL.

Select the object: Form and the event: onLoad, click edit and add the following code:

$(':input').attr('autocomplete','off');  //adding the autocomplete attribute with off value to all input elements.
$("#login_troca").val(''); //emptying the value of the element input in id login_exchange.
$("#pswd_troca").val(''); //emptying the value of the element input in id pswd_exchange.
setTimeout(function(){ //starting a timer where the code below will be executed after 500 milliseconds
$("#login_troca").css('display','none'); //hiding the id element login_exchange
$("#pswd_troca").css('display','none'); ////hiding the id element pswd_exchange
}, 500);
}, 500);

** Do not forget to save the code. **

Now let’s go to the login and pswd fields (name of the suggested fields in this example).

In the settings of the login field we will put the following value for the Label property of the field:

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

The same for the pswd Field Label:

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

Ok, Cool!

Now save and test the application.

Explaining:

Chrome gave the first element of name = “NAME” the auto-fill. With that in mind, what have we done? We just duplicated the element of name = “NAME” and make it transparent and after half a second of the page load we hide this field. This tricks the browser, causing it to autocomplete the first field of name = “NAME” found, not assigning the autocomplete to the second element of the same name.

It is a contour solution that relieves this unpleasant option on login screens, leaving the login screen lighter without the self-filling yellow-backed windows.

Well, that was the alternative I discovered to sort this issue of autocomplete and autofill in Chrome, adjustable to our clear Scriptcase.

I hope you find it useful as it was for me!

Ah! But one last thing… if you still haven’t used Scriptcase, i invite you to download and try it:

See more post in our blog: ScriptcaseBlog