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

By ,

March 8, 2019

a

You might also like…

How the AI revolution has impacted web systems

The world of IT is constantly evolving, and new trends are always emerging, making it sometimes dif...

12 IT Trends to Keep an Eye on in 2023

The year 2023 has already started in full swing bringing news and projecting trends for the web dev...

What’s new in PHP 8.1

In this article, we will talk a little about the new features, changes, and improvements coming wit...

You might also like…

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.