How to disable the autofill in browser text inputs selectively via code?

Question

Is it possible to selectively disable the autofill feature in text fields using code?

I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.

I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.

Hinds

refer this code. it worked for me #32869 – Suet

Answer 1

Look at the autocomplete HTML attribute (on form or input tags).

<form [...] autocomplete="off"> [...] </form>

W3C > Autocomplete attribute

Edit:

Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.

First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.

Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.

jQuery( function()
{
  $("input[autocomplete=off]").val( "" );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" value="John" autocomplete="off">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" value="qwerty" autocomplete="off">
  </div>
  <input type="submit" value="Login">
</form>

Hardily

autocomplete is now ignored by all but the most obsolete/outdated browsers – Cantankerous

This is not a viable solution anymore. – Soule

Answer 2

you can put it into your inputs:

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

or in jquery

$(":input").attr("autocomplete","off"); 

Chink

Answer 3

There are 2 solutions for this problem. I have tested following code on Google Chrome v36. Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)

Solution 1:

Put following code under under <form ..> tag.

<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

...

Read more

Solution 2:

$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });

It removes "name" and "id" attributes from elements and assigns them back after 1ms.

Shawm

This is the only method that currently works, other answers are outdated. – Cantankerous

Solution 1 is really smart but it doesn't work if you set the display to none – Roots

@Roots They fixed it in later versions. They are quite adamant about forcing autofill even if you don't want it. :) – Shawm

Answer 4

Adding an autocomplete=off attribute to the html input element should do that.

Vitalis

Answer 5

Add the AutoCompleteType="Disabled" to your textbox

Separatist

Answer 6

This should work in every browser

    <script type="text/javascript">
        var c = document.getElementById("<%=TextBox1.ClientID %>");
        c.select =
        function (event, ui) 
        { this.value = ""; return false; }
    </script>

Ching

Answer 7

My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:

<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
    $("#txtPassword").focus(function () {
        $("#txtPassword").prop('type', 'password');
    });
</script>

Sampan

This is a clever solution. I did tweak this though in my case. $('body').on('focus','.morph_to_pass',function() { $(this).prop('type','password'); }); – Tomsk

Answer 8

I have successfully tested this in Edge and Firefox.

<input type="text" id="cc" name="cc" autocomplete="off">

works for regular text input.

For passwords, you need to use autocomplete="new-password"

<input type="password" id="cc1" name="cc" autocomplete="new-password">

per Mozilla Development Network

Wacke

Answer 9

Place below code above your username control. This will work in call the browser.

<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>

Oidium

It doesn't answer the question. Why do you hide your fields? Why are they inside a div instead of a form? How did you find this 10+ year old question with an accepted answer? – Graptolite