How do you disable browser Autocomplete on web form field / input tag?

    |
  • Added:
  • |
  • In: Wordpress

How do you disable autocomplete in the major browsers for a specific input (or form field)?

This Question Has 30 Answeres | Orginal Question | Brett Veenstra

This is a security issue that browsers ignores now. Browsers identifies and stores content using input names, even if developpers consider the information is sensitive and should not be stored. Making an input name different between 2 requests will solve the problem (but will still be saved in browser's cache and will also increase browser's cache). Ask the user to activate or deactivate options in its browser's settings is not a good solution. The issue can be fixed in the backend.

Here's my fix. An approach that I have implemented in my framework. All autocomplete elements are generated with an hidden input like this :

<? $r = rmd5(rand().mocrotime(TRUE)); ?> <form method="POST" action="./"> <input type="text" name="<? echo $r; ?>" /> <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" /> <input type="submit" name="submit" value="submit" /> </form> 

Server then process post variables like this :

foreach ($_POST as $key => $val) { if(preg_match('#^__autocomplete_fix_#', $key) === 1){ $n = substr($key, 19); if(isset($_POST[$n]))$_POST[$val] = $_POST[$n]; } } 

The value can be accessed as usual

var_dump($_POST['username']); 

And the browser won't be able to suggest information from previous request or from previous users.

All works like a charm, even if browsers updates, wants to ignore autocomplete or not. That has been the best way to fix the issue for me.

I know this is an old post, but it could be important to know that Firefox (I think only firefox) uses a value called ismxfilled that basically forces autocomplete.

ismxfilled="0" for OFF

or

ismxfilled="1" for ON

Adding autocomplete="off" is not gonna cut it.

Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.

I can't believe this is still an issue so long after it's been reported. The above solutions didn't work for me, as safari seemed to know when the element was not displayed or off-screen, however the following did work for me:

<div style="height:0px; overflow:hidden; "> Username <input type="text" name="fake_safari_username" > Password <input type="password" name="fake_safari_password"> </div> 

Hope that's useful for somebody!

Chrome is planning to support this.

For now the best suggestion is to use an input type that is rarely autocompleted.

chrome discussion

<input type='search' name="whatever" /> 

to be compatible with firefox, use normal autocomplete='off'

<input type='search' name="whatever" autocomplete='off' /> 

None of the hacks mentioned here worked for me in Chrome. There's a discussion of the issue here: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Adding this inside a <form> works (at least for now):

<div style="display: none;"> <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" /> </div> 

This work for me.

<input name="pass" type="password" autocomplete="new-password" /> 

The answer dsuess posted with the readonly was very clever and worked. But as I am using boostrap, the readonly input field was - until focused - marked with grey background. While the document loads, you can trick the browser by simply locking and unlocking the input.

So I had an idea to implement this into jQuery solution:

 jQuery(document).ready(function () { $("input").attr('readonly', true); $("input").removeAttr('readonly'); }); 
<script language="javascript" type="text/javascript"> $(document).ready(function () { try { $("input[type='text']").each(function(){ $(this).attr("autocomplete","off"); }); } catch (e) { } }); </script> 

Three options: First:

<input type='text' autocomplete='off' /> 

Second:

<form action='' autocomplete='off'> 

Third (javascript code):

$('input').attr('autocomplete', 'off'); 

You can disable autocomplete if you remove the form tag, the same was done by my bank and I was wondering how they did this. It even remove the value that was already remembered by the browser after you remove the tag.

In addition to autocomplete=off, you could also have your form fields names be randomized by the code that generates the page, perhaps by adding some session-specific string to the end of the names. When the form is submitted, you can strip that part off before processing them on the server side. This would prevent the web browser from finding context for your field and also might help prevent XSRF attacks because an attacker wouldn't be able to guess the field names for a form submission.

A little late to the game...but I just ran into this problem and tried several failures, but this one works for me found on MDN

In some case, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really force the no-completion is to assign a random string to the attribute like so :

autocomplete="nope" 

Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

This workaround is in addition to apinstein's post about browser behavior.

fix browser autofill in: readonly and set writeble on focus (click and tab)

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/> 

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly'); // fix for mobile safari to show virtual keyboard this.blur(); this.focus(); }" /> 

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Because, Browser auto fills credentials to wrong text field!?

I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills (just guessing due to observation) the nearest textlike-input field, that appears prior the password field in DOM. As the browser is the last instance and you can not control it,

This readonly-fix above worked for me.

The solution for Chrome is to add autocomplete="new-password" to the input type password.

Example:

<form name="myForm"" method="post"> <input name="user" type="text" /> <input name="pass" type="password" autocomplete="new-password" /> <input type="submit"> </form> 

Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".

This works well for me.

Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.

You can simply put the autocomplete="off" in the HTML fields like following code.

<input type="text" name="" value="" autocomplete="off" /> 

A workaround is not to insert the password field into the DOM before the user wants to change the password. This may be applicable in certain cases:

In our system we have a password field which in an admin page, so we must avoid inadvertently setting other users' passwords. The form has an extra checkbox that will toggle the password field visibility for this reason.

So in this case, autofill from a password manager becomes a double problem, because the input won't even be visible to the user.

The solution was to have the checkbox trigger whether the password field is inserted in the DOM, not just its visibility.

Pseudo implementation for AngularJS:

<input type="checkbox" ng-model="createPassword"> <input ng-if="changePassword" type="password"> 

If your issue is having a password field being auto-completed, then you may find this useful...

We had this issue in several areas of our site where the business wanted to re-query the user for their username and password and specifically did not want the password autofill to work for contractual reasons. We found that the easiest way to do this is to put in a fake password field for the browser to find and fill while the real password field remains untouched.

<!-- This is a fake password input to defeat the browser's autofill behavior --> <input type="password" id="txtPassword" style="display:none;" /> <!-- This is the real password input --> <input type="password" id="txtThisIsTheRealPassword" /> 

Note that in Firefox and IE, it was simply enough to put any input of type password before the actual one but Chrome saw through that and forced me to actually name the fake password input (by giving it an obvious password id) to get it to "bite". I used a class to implement the style instead of using an embedded style so try that if the above doesn't work for some reason.

Just set autocomplete="off". There is a very good reason for doing this: You want to provide your own autocomplete functionality!

Safari does not change its mind about autocomplete if you set autocomplete="off" dynamically from javascript. However it would respect if you do that on per-field basis.

$(':input', $formElement).attr('autocomplete', 'off'); 

Try this :

<input type='text' autocomplete='off' /> 

This is what we called autocomplete of a textbox. enter image description here We can disable autocomplete of a Textbox in 2 ways-

  1. By Browser Label
  2. By Code

    To disable in browser go to the setting

    To dissable in browse go to the setting

Go to advance setting and uncheck the checkbox and then Restore.

Go to advance setting and uncheck the checkbox and then Restore.

If you want to disable in coding label you can do as follow-
Using AutoCompleteType="Disabled":

<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox> 

By Setting Form autocomplete="off":

<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox> 

By Setting Form autocomplete="off":

<form id="form1" runat="server" autocomplete="off"> //your content </form> 

By using code in .cs page

protected void Page_Load(object sender, EventArgs e) { if(!Page.IsPostBack) { txt_userid.Attributes.Add("autocomplete", "off"); } } 

By Using Jquery

head runat="server"> <title></title> <script src="Scripts/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#txt_userid').attr('autocomplete', 'off'); }); </script> 

My problem was mostly autofill with Chrome, but I think this is probably more problematic than autocomplete.

Trick : using a timer to reset form and set password fields to blank. The 100ms duration seems to be minimal for it to work.

$(document).ready(function() { setTimeout(function() { var $form = $('#formId'); $form[0].reset(); $form.find('INPUT[type=password]').val(''); }, 100); }); 

I've been trying endless solutions, and then I found this:

Instead of autocomplete="off" just simply use autocomplete="false"

As simple as that, and it works like a charm in Google Chrome as well!

autocomplete = 'off' didn't work for me, anyway i set the value attribute of the input field to a space i.e <input type='text' name='username' value=" "> that set the default input character to a space, and since the username was blank the password was cleared too.

I use this TextMode="password" autocomplete="new-password" and in in page load in aspx txtPassword.Attributes.Add("value", '');

It doesn't seem to be possible to achieve this without using a combination client side and server side code.

In order to make sure that the user must fill in the form every time without autocomplete I use the following techniques:

  1. Generate the form field names on the server and use hidden input fields to store those names, so that when submitted to the server the server side code can use the generated names to access the field values. This is to stop the user from having the option to auto populate the fields.

  2. Place three instances of each form field on the form and hide the first and last fields of each set using css and then disable them after page load using javascript. This is to prevent the browser from filling in the fields automatically.

Here is a fiddle that demonstrates the javascript, css and html as described in #2 https://jsfiddle.net/xnbxbpv4/

javascript:

$(document).ready(function() { $(".disable-input").attr("disabled", "disabled"); }); 

css:

.disable-input { display: none; } 

html:

<form> <input type="email" name="username" placeholder="username" class="disable-input"> <input type="email" name="username" placeholder="username"> <input type="email" name="username" placeholder="username" class="disable-input"> <br> <input type="password" name="password" placeholder="password" class="disable-input"> <input type="password" name="password" placeholder="password"> <input type="password" name="password" placeholder="password" class="disable-input"> <br> <input type="submit" value="submit"> </form> 

Here is a rough example of what the server code using asp.net with razor would be to facilitate #1

model:

public class FormModel { public string Username { get; set; } public string Password { get; set; } } 

controller:

public class FormController : Controller { public ActionResult Form() { var m = new FormModel(); m.Username = "F" + Guid.NewGuid().ToString(); m.Password = "F" + Guid.NewGuid().ToString(); return View(m); } public ActionResult Form(FormModel m) { var u = Request.Form[m.Username]; var p = Request.Form[m.Password]; // todo: do something with the form values ... return View(m); } } 

view:

@model FormModel @using (Html.BeginForm("Form", "Form")) { @Html.HiddenFor(m => m.UserName) @Html.HiddenFor(m => m.Password) <input type="email" name="@Model.Username" placeholder="username" class="disable-input"> <input type="email" name="@Model.Username" placeholder="username"> <input type="email" name="@Model.Username" placeholder="username" class="disable-input"> <br> <input type="password" name="@Model.Password" placeholder="password" class="disable-input"> <input type="password" name="@Model.Password" placeholder="password"> <input type="password" name="@Model.Password" placeholder="password" class="disable-input"> <br> <input type="submit" value="submit"> } 

I use the following jQuery snippet:

// Prevent input autocomplete $.fn.preventAutocomplete = function() { this.each(function () { var $el = $(this); $el .clone(false, false) .insertBefore($el) .prop('id', '') .hide() ; }); }; 

And than just $('#login-form input').preventAutocomplete();

So here is it:

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text"> function turnOnPasswordStyle(){ $('#inputpassword').attr('type', "password"); } 

I would like to clarify that this answer is for completeness sake and for community knowledge, by no means is it recommended.

With regards to Internet Explorer 11, there is a security feature in place that can be used to block autocomplete. It works like this:

Any form input value that is modified in JavaScript AFTER the user has already entered it is flagged as ineligible for autocomplete.

This feature is normally used to protect users from malicious websites that want to change your password after you enter it or the like.

However, you could insert a single special character at the beginning of a password string to block autocomplete. This special character could be detected and removed later on down the pipeline.


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top