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:
tela

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.

logineng

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:

https://www.scriptcase.net/download/  

 

You might also like…

Key Features to become a good Web Developer

Perhaps at some point you have wondered what skills would be required to become a web developer. ...

Web Development and IT Trends for 2019

I’ve highlighted here some strong trends for 2019 web development, programming and professional pr...

Trends for web development in 2017

Trends for web development In this post you will see some Web Design, Digital Media and Development...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.