CODEWITHSUNDEEP
htmlformsautocomplete
Dennis van Rooij
Dennis van Rooij

Reputation: 91

Autocomplete "Off" is completely ignored

Okay, so I know how this autocomplete="off" tag is supposed to work on all inputs except a password field and I have searched for an answer to my specific problem but it looks like I'm the only one with this problem. I know I can add it to the form element or to an individual input-element. My doctype is set as: <!DOCTYPE html>.

I have a form with 2 questions (simplified for this example): Name and Phone. For testing purposes I have added the autocomplete="off" to both fields AND the form element.

This is my form:

<form id="myform" autocomplete="off">
    <input autocomplete="off" type="text" name="name" />
    <input autocomplete="off" type="text" name="phone" />
</form>

The form totally ignores the autocomplete="off" and suggests my name and phone number.

Does anybody have any idea?

Screen-shot

Upvotes: 9

Views: 13679

Answers (10)

Jon Freynik
Jon Freynik

Reputation: 369

I had success with the following UGLY hack:

  1. Convert the "username and password" <input> fields to <textarea> fields

  2. Set both the rows="1" property and the resize:none; style property on them and style them with CSS to match the look and feel of your input fields.

  3. Add the following CSS properties to the password field to mask the input properly:

    style="-webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"

In my case, the browser then ignores them. I'm not sure how long this hack will work.

Here's a full example of it working:

<form>

<label>
  <div>Username:</div>
  <textarea
    placeholder="Your Username"
    name="username"
    rows="1"
    style="resize: none;"
  ></textarea>
</label>

<label>
  <div>Password:</div>
  <textarea
    placeholder="Your Password"
    name="password"
    rows="1"
    style="resize: none; -webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"
  ></textarea>
</label>

<br />

<button type="submit">Login</button>

</form>

Upvotes: 0

Murat Yıldız
Murat Yıldız

Reputation: 12032

Try this:

$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        $( this ).attr( 'autocomplete', 'off' );
    });
});

Or this:

$(document).ready(function(){ 
    $("input").attr("autocomplete", "off");
});

On the other hand, you might have a look at this Chrome Browser Ignoring AutoComplete=Off.

Upvotes: 1

Jawad Altaf
Jawad Altaf

Reputation: 105

It appears that Chrome now ignores autocomplete="off" unless it is on the tag since v34.

you can't cheat by create an hidden input over. Auto complete feature will get the first input text to fill data.

Method:1

You Can Try This One


<form id="" method="post" action="" autocomplete="off">
    <input type="text" style="display:none" />
    <input type="password" style="display:none">
    <asp:textbox autocomplete="off">
</form>

Upvotes: 0

Peace Ngara
Peace Ngara

Reputation: 723

The solution is actually very simple:

autocomplete="__away"

What we have done is tell any browser to completely ignore the field since __away is an air value - does not exist.

Upvotes: 18

L. P.
L. P.

Reputation: 113

I just fix it with 

<form autocomplete="off">
your inputs
</form>

so you need autocomplete="off" in your <form> and not only in <input>

Upvotes: 0

Tonci14
Tonci14

Reputation: 59

"off" is not working at all. I thing browser saved forms knows "off" as input identifier not a setting value. So you need random string to make browser thing that it a new input, input you see first time

$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        let text = "";
        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (let i = 0; i < 20; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        $( this ).attr( 'autocomplete', text );
    });
});

Upvotes: -1

Tom Engberg
Tom Engberg

Reputation: 1

Try This: 

<form id="myform" autocomplete="dummy-no-auto-complete-fix">
    <input autocomplete="dummy-no-auto-complete-fix" type="text" name="name" />
    <input autocomplete="dummy-no-auto-complete-fix" type="text" name="phone" />
</form>

Upvotes: 0

user37416
user37416

Reputation: 121

Try setting autocomplete="new-password" in the password element. This works for chrome only

Upvotes: 2

Nader
Nader

Reputation: 376

Many modern browsers do not support autocomplete="off".

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

Upvotes: 1

Luke
Luke

Reputation: 19971

Chrome unfortunately decided to ignore autocomplete="off", making it difficult on developers in hopes of maybe making some thing easier for typical users.

...we started ignoring autocomplete=off for Chrome Autofill data

Source: https://bugs.chromium.org/p/chromium/issues/detail?id=468153 (2015)

Is there a solution?

Not really... That comment continues:

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

But that doesn't seem to work anymore (as of Chrome 53). From the discussion here - Chrome Browser Ignoring AutoComplete=Off - as well as my own testing, there seems to no longer be a way to turn off autofill without using some kind of hack.

Upvotes: 3

Related Questions