By Brett Veenstra


2008-08-05 16:22:32 8 Comments

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

30 comments

@Adrian P. 2020-07-14 21:18:01

I was fighting to autocomplete for years. I've tried every single suggestion, and nothing worked for me. Adding by jQuery 2 attributes worked well:

$(document).ready( function () {
    setTimeout(function() {
        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
    }, 10);
}); 

will result in HTML

<input id="start_date" name="start_date" type="text" value="" class="input-small hasDatepicker" autocomplete="off" placeholder="Start date" autocorrect="off">

@Nerve 2020-07-09 06:46:19

There are many answers but most of them are hacks or some kind of workaround.

There are three cases here.

Case I: If this is your standard login form. Turning it off by any means is probably bad. Think hard if you really need to do it. Users are accustomed to browsers remembering and storing the passwords. You shouldn't change that standard behaviour in most cases.

In case you still want to do it, see Case III

Case II: When this is not your regular login form but name or id attribute of inputs is not "like" email, login, username, user_name, password.

Use

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

Case III: When this is not your regular login form but name or id attribute of inputs is "like" email, login, username, user_name, password.

For example: login, abc_login, password, some_password, password_field.

All browsers come with password management features offering to remember them OR suggesting stronger passwords. That's how they do it.

However, suppose you are an admin of a site and can create users and set their passwords. In this case you wouldn't want browsers to offer these features.

In such cases, autocomplete="off" will not work. Use autocomplete="new-password"

<input type="text" name="yoda" autocomplete="new-password">

Helpful Link:

  1. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

@prabhat.mishra2812 2020-06-26 10:56:44

Just autocomplete="off" list="autocompleteOff" in your input and work done for IE/Edge! and for chrome add autocomplete="new password"

@Patrick 2020-04-08 15:32:44

None of the solutions I've found at this day bring a real working response.

Solutions with an autocomplete attribute do not work.

So, this is what I wrote for myself:

<input type="text" name="UserName" onkeyup="if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >

You should do this for every input field you want as a password type on your page.

And this works.

cheers

@Archer 2020-04-08 16:39:46

Hi @Patrick you're answering a question which is over 11 years old. Please try to answer new questions, this is more helpful.

@Murat Yıldız 2017-11-01 13:26:43

In addition to

autocomplete="off"

Use

readonly onfocus="this.removeAttribute('readonly');"

for the inputs that you do not want them to remember form data (username, password, etc.) as shown below:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Hope this helps.

@mcallahan 2017-11-10 19:16:36

For me in IE11 I can't type into the text box even after the onfocus removes the readonly attribute. However, if I click a second time on the text box then I can type.

@palmsey 2018-02-22 14:59:48

I ran into the same issue with IE11 (can't type until second focus). Adding a blur and then focus again works. $(document).on('focus', 'input:password[readonly="readonly"]', function () { $(this).prop('readonly', false).blur().focus(); });

@Murat Yıldız 2018-11-08 18:20:54

@Andrew Sure, you can. This is the core principle to overwhelm this issue and I also added an update containing full code example ;)

@rinatdobr 2019-06-21 18:21:54

I've also added onfocusout="this.setAttribute('readonly', 'readonly');"

@Geynen 2016-11-24 17:07:18

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

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.

@Jake 2017-12-14 22:04:59

This works in Chrome for other types of fields as well, not just type="password".

@Crak_mboutin 2018-01-15 21:02:46

I used it with password, email and text types and it worked. I used it simply like this: autocomplete="new"

@Denuka 2019-01-31 18:51:55

autocomplete="nope" name="pswd" and used <input name="dummyPassword" type="password" style="display:none;"> before the real password input field. This worked for me.

@IvanRF 2019-07-02 20:28:19

@Andrew Morton 2020-04-07 10:38:30

This works in almost all browsers now, not just Chrome: autocomplete#Browser_compatibility.

@splashout 2020-05-19 20:15:25

This is the best answer as of now. See the end of this page for more infomation: developer.mozilla.org/en-US/docs/Web/Security/…

@Williaan Lopes 2020-07-02 23:29:08

autocomplete="new-password" and why the "off" parameter doesn't work?? HTML attributes it's really crap. That works on opera browser! Thanks.

@Jos 2020-03-03 12:36:51

The autofill functionality changes the value without selecting the field. We could use that in our state management to ignore state changes before the select event.

An example in React:

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

If the browser tries to fill the field, the element is still locked and the state is not affected. Now you can just replace the input field with a NoAutoFillInput component to prevent autofill:

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

Off course, this idea could be used with other JS frameworks as well.

@Edison 2018-03-26 12:07:16

My solution is Change the text inputs type dynamically using angular js directive and it works like charm

first add 2 hidden text fields

and just add a angular directive like this

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

then use it in your text field where you need to prevent auto complete

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

NB: dont forget to include jquery, and set type ="text" initially

@Nagnath Mungade 2020-01-17 12:59:09

Simply try to put attribute autocomplete with value "off" to input type.

<input type="password" autocomplete="off" name="password" id="password" />

@Azaz ul Haq 2019-12-11 11:08:42

As of Dec 2019:

Before answering this question let me say, I tried almost all the answers here on SO and from different forums but couldn't find a solution that works for all modern browsers and IE11.

So here is the solution I found, and I believe it's not yet discussed or mentioned in this post.

According to Mozilla Dev Network(MDN) post about how to turn off form autocomplete

By default, browsers remember information that the user submits through fields on websites. This enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load)

On same article they discussed the usage of autocmplete property and its limitation. As we know, not all browsers honor this attribute as we desire.

Solution

So at the end of the article they shared a solution that works for all browsers including IE11+Edge. It is basically a jQuery plugin that do the trick. Here is the link to jQuery plugin and how it works.

Code snippet:

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

Point to notice in HTML is that password field is of type text and password class is applied to identify that field:

<input id="Password" name="Password" type="text" class="form-control password">

Hope this would help someone.

@xixe 2019-11-28 11:47:15

My solution with jQuery. It may not be 100% reliable, but it works for me. The idea is described in code annotations.

    /**
 * Prevent fields autofill for fields.
 * When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
 * the browser does not find this type of autocomplete in the saved values and does not offer options.
 * Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
 * @type {{init: *}}
 */
var PreventFieldsAutofill = (function () {
    function init () {
        events.onPageStart();
    }

    var events = {
        onPageStart: function () {
            $(document).on('focus', 'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]', function () {
                methods.replaceAttrs($(this));
            });
            $(document).on('blur', 'input[data-prev-autocomplete]', function () {
                methods.returnAttrs($(this));
            });
            $(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
                if (event.keyCode == 13 || event.which == 13) {
                    methods.returnAttrs($(this));
                }
            });
            $(document).on('submit', 'form', function () {
                $(this).find('input[data-prev-autocomplete]').each(function () {
                    methods.returnAttrs($(this));
                });
            });
        }
    };

    var methods = {
        /**
         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
         * @param $input
         */
        replaceAttrs: function ($input) {
            var randomString = 'off-forced-' + Date.now();
            $input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
            $input.attr('autocomplete', randomString);
            if ($input.attr('name')) {
                $input.attr('data-prev-name', $input.attr('name'));
                $input.attr('name', randomString);
            }
        },
        /**
         * Restore original autocomplete and name value for prevent saving text in browser for unique value
         * @param $input
         */
        returnAttrs: function ($input) {
            $input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
            $input.removeAttr('data-prev-autocomplete');
            if ($input.attr('data-prev-name')) {
                $input.attr('name', $input.attr('data-prev-name'));
                $input.removeAttr('data-prev-name');
            }
        }
    };

    return {
        init: init
    }
})();
PreventFieldsAutofill.init();
.input {
  display: block;
  width: 90%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="#">
  <p>
    <label for="input-1">Firts name without autocomplete</label><br />
    <input id="input-1" class="input" type="text" name="first-name" autocomplete="off" placeholder="Firts name without autocomplete" />
  </p>
  <p>
    <label for="input-2">Firts name with autocomplete</label><br />
    <input id="input-2" class="input" type="text" name="first-name" autocomplete="given-name" placeholder="Firts name with autocomplete" />
  </p>
  <p>
    <button type="submit">Submit form</button>
  </p>
</form>

@Sikandar Amla 2019-11-30 13:38:01

I tried almost all the answer but the new version of Chrome is smart; if you write

autocomplete="randomstring" or autocomplete="rutjfkde"

it automatically converts it to

autocomplete="off"

when input control receives the focus.

So, I did it using jQuery, my solution is as follows.

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

This is the easiest and will do the trick for any number of controls you have on the form. Hope it will be helpful for the community.

@João Victor Scanagatta 2019-09-10 13:52:54

I went through the same problem, today 09/10/2019 only solution I found was this

Add autocomplete="off" into the form tag.

put 1 false inputs after opening form tag.

<input id="username" style="display:none" type="text" name="fakeusernameremembered">

but it won't work on password type field, try

<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>

on script

function turnOnPasswordStyle() {
    $('#password').attr('type', "password");
}

This is tested on Chrome-78, IE-44, Firefox-69

@shiva samalla 2019-11-06 13:06:55

To avoid autocomplete add the autocomplete="off" to your html input property. Example:

@bagerard 2019-11-06 13:26:19

example seems to be missing!

@azizsagi 2019-09-27 10:59:34

The simplest answer is

<input autocomplete="on|off">

But keep in mind the browser support. Currently, autocomplete attribute is supported by

Chrome 17.0 & latest IE 5.0 & latest
Firefox 4.0 & latest
Safari 5.2 & latest
Opera 9.6 & latest

@Marcelo Agimóvel 2019-08-01 20:09:19

I'v solved putting this code after page load:

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>

@Lucas 2019-07-19 11:56:20

unfortunately this option was removed in most browsers, so it is not possible to disable the password hint, until today I did not find a good solution to work around this problem, what we have left now is to hope that one day this option will come back.

@Kishan Vaghela 2019-07-18 02:44:50

Easy Hack

Make input read-only

<input type="text" name="name" readonly="readonly">

Remove read-only after timeout

$(function() {
        setTimeout(function() {
            $('input[name="name"]').prop('readonly', false);
        }, 50);
    });

@Pasham Akhil Kumar Reddy 2019-07-12 06:40:46

Most of the answers didn't help as the browser was simply ignoring them. (Some of them were not cross-browser compatible). The fix that worked for me is:

<form autocomplete="off">
    <input type="text" autocomplete="new-password" />
    <input type="password" autocomplete="new-password" />
</form>

I set autofill="off" on the form tag and autofill="new-password" wherever the autofill was not necessary.

@nlucaroni 2008-08-05 16:24:53

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

  • The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
  • We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

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

@Winston Fassett 2008-11-12 04:11:48

This did not work for me in Firefox 3.0.3 I had to put the autocomplete attribute in the FORM rather than the INPUT.

@Jrgns 2009-01-19 08:04:08

Autocomplete is only defined in the HTML 5 standards, so it will break any validations you run against HTML 4.*...

@AviD 2010-12-13 12:11:57

@Winston, you should put it both on the form, AND on the input element itself. That way you cover all the nonstandardness of browsers.

@Jo Liss 2011-02-26 00:57:53

And remember to disable your autocomplete = on extension (if you're using Chrome) before you test your webapp. Else you'll feel real silly like me. ;)

@mikato 2012-09-28 14:31:41

This question/answer may be old now but I'll say that Firefox 15 seems to put the password in despite the autocomplete="off" in the input and form elements. It also fills it even if you change the name and id of the password field. This is if the password is already saved. Now these do seem to prevent the password from being saved if it hasn't been already.

@Pierre Henry 2013-02-05 08:32:44

Also, KeeFox, a Firefox extension to use KeePass to store your passwords, interferes with that and fills the password anyways if it was saved previously.

@Silvio Delgado 2013-02-25 20:08:32

This code also disallow saved username/passwords to been shown?

@unode 2014-02-27 17:51:06

Latest versions of Firefox >20 (older were not tested) will not prompt for saving username/password if the form has autocomplete=off.

@e-info128 2014-03-04 14:54:26

With jquery: $(document).ready(function(){ $('input[type="text"], select').val('') });

@Simon East 2014-06-27 03:53:20

Chrome also ignores this (for password fields) as of a code patch in Feb 2014: groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/‌​…

@Sam Watkins 2015-05-19 04:47:55

This no longer works for login/password fields at least. The code in apinstein's answer still works.

@RWolfe 2015-07-07 14:29:00

so what does one do when (in chrome) i have disabled autocomplete and used random name attributes for the inputs and username AND password still show up??

@camiblanch 2015-07-14 16:41:33

You must set autocomplete to be anything but "on" or "off". Then it will actually disable. I know this is true for Chrome, but I haven't tested it in any other browsers. stackoverflow.com/questions/30053167/autocomplete-off-vs-fal‌​se/…

@Brandito 2018-04-10 06:48:43

@swapab not anymore :(

@NOYB 2018-07-06 03:58:18

If creating the form dynamically on server side, setting the value for user name to a tab should prevent the browser from auto filling the credentials. Though still providing auto completion suggestions. Upon receiving form submission trim the tab in case user didn't remove it. If a tab doesn't work maybe try a vertical tab or other non printing characters.

@Amir Tofighi 2018-08-08 20:10:12

For Chrome use: autocomplete="nope" It seems funny but it works! However this won't work for Firefox or other browsers. For them you can add the autocomplete="off" to the form element. If you are using web forms your form element is in the master page.

@step 2019-03-27 16:13:42

Using random characters like this: <input name="name" type="text" autocomplete="rutjfkde">, chrome will never remember value. When you generate <input> tag on backend, generate random string. Simple working solution.

@Parapluie 2019-05-13 14:56:57

I have found that some more recent "smart" browsers, will extrapolate and make auto-fill decisions based on nearby text content with in the form. For example, if the text input field is immediately preceded by the text "First name: ", then browsers like Safari will start grabbing suggestions from places as far-flung as your OS contact book. One solution to this is more clever (read: "idiosyncratic") naming than obvious choices like, "First name".

@mh-cbon 2019-06-18 15:22:59

this answer might require an update developer.mozilla.org/en-US/docs/Web/Security/…

@gtamborero 2019-09-12 11:31:47

Over last firefox (v69.0) I can only disable autocomplete globally using it inside the form: <form autocomplete="off" ...>

@ravo10 2019-10-10 09:21:16

@AviD Actually, the correct way to do it is to turn it off in the form. That way it will turn off autocomplete for every input element and it will not have any fallback autocomplete outputs. When turned off in the form, you can still specify individual input elements for their autocomplete. It will be much cleaner. Your answer is old, but I wanted to add this note.

@AviD 2019-10-10 13:05:43

@ravo10 I'd hope that 9 years later, this dumb little idiosyncrasy is finally solved :-)

@ravo10 2019-10-11 17:20:42

@AviD Haha, yes.

@splashout 2020-05-19 20:17:36

Be sure to look at @Geynen's answer which uses autocomplete="new-password"

@step 2018-08-04 14:22:21

I've solved the endless fight with Google Chrome with the use of random characters. When you always render autocomplete with random string, it will never remember anything.

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

Hope that it will help to other people.

@Raghuram Kasyap 2018-08-31 13:44:08

This works even better. You can add a small JS that generates a random code for every page load, and add that code to the input field: <code> function autoId(){ var autoId = ""; var dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456‌​789"; for(var i=0; i<12; i++){ autoId += dict.charAt(Math.floor(Math.random() * dict.length)); } return autoId; } $('.autocompleteoff').attr('autocomplete', autoId());</code> You can add the autocompleteoff class to your desired input field.

@Sukanya Purushothaman 2018-09-06 05:31:32

not working in my chrome Version 68.0.3440.106 (Official Build) (64-bit)

@MacK 2018-10-17 11:16:10

Chrome has been fixed to use the standardized "off" now

@Nour Lababidi 2018-11-04 03:01:58

Sadly it works better than what is called standard on chrome

@step 2019-06-21 13:01:52

You have to generate new random string on each reload page.

@step 2019-10-07 20:11:57

Today I found that Chrome will overwrite random string with "Off". I can not believe that Chrome developers doing this attribute bad and noncontrol. Why ohh my got.

@ladone 2019-04-19 12:51:28

You can add name in attribute name how email address to you form and generate email value for example:

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

If you use this method, Google Chrome can't insert autofill password.

@Alan M. 2019-02-19 20:16:14

I wanted something that took the field management completely out of the browser's hands, so to speak. In this example, there's a single standard text input field to capture a password — no email, user name etc...

<input id='input_password' type='text' autocomplete='off' autofocus>

There's a variable named "input", set to be an empty string...

var input = "";

The field events are monitored by JQuery...

  1. On focus, the field content and the associated "input" variable are always cleared.
  2. On keypress, any alphanumeric character, as well as some defined symbols, are appended to the "input" variable, and the field input is replaced with a bullet character. Additionally, when the Enter key is pressed, the typed characters (stored in the "input" variable) are sent to the server via Ajax. (See "Server Details" below.)
  3. On keyup, the Home, End, and Arrow keys cause the "input" variable and field values to be flushed. (I could have gotten fancy with arrow navigation and the focus event, and used .selectionStart to figure out where the user had clicked or was navigating, but it's not worth the effort for a password field.) Additionally, pressing the Backspace key truncates both the variable and field content accordingly.

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[[email protected]#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

Front-End Summary

In essence, this gives the browser nothing useful to capture. Even if it overrides the autocomplete setting, and/or presents a dropdown with previously entered values, all it has is bullets stored for the field value.


Server Details (optional reading)

As shown above, Javascript executes location.reload() as soon as the server returns a JSON response. (This logon technique is for access to a restricted administration tool. Some of the overkill, related to the cookie content, could be skipped for a more generalized implementation.) Here are the details:

  • When a user navigates to the site, the server looks for a legitimate cookie.
  • If there is no cookie, the logon page is presented. When the user enters a password and it is sent via Ajax, the server confirms the password and also checks to see if the user's IP is in an Authorized IP list.
  • If either the password or IP are not recognized, the server doesn't generate a cookie, so when the page reloads, the user sees the same logon page.
  • If both the password and IP are recognized, the server generates a cookie that has a ten-minute life span, and it also stores two scrambled values that correspond with the time-frame and IP.
  • When the page reloads, the server finds the cookie and verifies that the scrambled values are correct (i.e., that the time-frame corresponds with the cookie's date and that the IP is the same).
  • The process of authenticating and updating the cookie is repeated every time the user interacts with the server, whether they are logging in, displaying data, or updating a record.
  • If at all times the cookie's values are correct, the server presents the full website (if the user is logging in) or fulfills whatever display or update request was submitted.
  • If at any time the cookie's values are not correct, the server removes the current cookie which then, upon reload, causes the logon page to be re-displayed.

@JoerT 2018-11-21 23:06:45

If you want to prevent the common browser plug-in LastPass from auto-filling a field as well, you can add the attribute data-lpignore="true" added to the other suggestions on this thread. Note that this doesn't only apply to password fields.

<input type="text" autocomplete="false" data-lpignore="true" />

I was trying to do this same thing a while back, and was stumped because none of the suggestions I found worked for me. Turned out it was LastPass.

@zapping 2018-12-17 06:39:35

This worked for me like a charm.

  1. Set the autocomplete attribute of the form to off
  2. Add a dummy input field and set its attribute also to off.
<form autocomplete="off">
 <input type="text" autocomplete="off" style="display:none">
</form>

@NOYB 2018-07-07 18:20:32

To prevent browser auto fill with the user's saved site login credentials, place a text and password input field at the top of the form with non empty values and style "position: absolute; top: -999px; left:-999px" set to hide the fields.

<form>
  <input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

It is important that a text field precede the password field. Otherwise the auto fill may not be prevented in some cases.

It is important that the value of both the text and password fields not be empty, to prevent default values from being overwritten in some cases.

It is important that these two fields are before the "real" password type field(s) in the form.

For newer browsers that are html 5.3 compliant the autocomplete attribute value "new-password" should work.

<form>
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

A combination of the two methods can be used to support both older and newer browsers.

<form>
  <div style="display:none">
    <input type="text" readonly tabindex="-1" />
    <input type="password" readonly tabindex="-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

@Julius Žaromskis 2018-04-13 06:35:32

No fake inputs, no javascript!

There is no way to disable autofill consistently across browsers. I have tried all the different suggestions and none of them work in all browsers. The only way is not using password input at all. Here's what I came up with:

<style type="text/css">
    @font-face {
        font-family: 'PasswordDots';
        src: url('text-security-disc.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    input.password {
        font-family: 'PasswordDots' !important;
        font-size: 8px !important;
    }
</style>

<input class="password" type="text" spellcheck="false" />

Download: text-security-disc.woff

Here's how my final result looks like:

Password Mask

The negative side effect is that it's possible to copy plain text from the input, though it should be possible to prevent that with some JS.

@Codemaker 2018-03-03 00:35:09

You can use autocomplete = off in input controls to avoid auto completion

For example:

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

if the above code doesn't works then try to add those attributes also

autocapitalize="off" autocomplete="off"

or

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

@joeytwiddle 2018-06-22 06:10:51

Google Chrome ignores the autocomplete="off" attribute for certain inputs, including password inputs and common inputs detected by name.

For example, if you have an input with name address, then Chrome will provide autofill suggestions from addresses entered on other sites, even if you tell it not to:

<input type="string" name="address" autocomplete="off">

If you don't want Chrome to do that, then you can rename or namespace the form field's name:

<input type="string" name="mysite_addr" autocomplete="off">

If you don't mind autocompleting values which were previously entered on your site, then you can leave autocomplete enabled. Namespacing the field name should be enough to prevent values remembered from other sites from appearing.

<input type="string" name="mysite_addr" autocomplete="on">

@gem007bd 2018-05-11 13:19:32

To solve this problem, I have used some CSS tricks and the following works for me.

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Please read this article for further detail.

Related Questions

Sponsored Content

21 Answered Questions

[SOLVED] jQuery disable/enable submit button

9 Answered Questions

[SOLVED] Disabled form inputs do not appear in the request

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

39 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

21 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

68 Answered Questions

[SOLVED] Disabling Chrome Autofill

39 Answered Questions

[SOLVED] HTML form readonly SELECT tag/input

  • 2008-12-15 15:59:09
  • Jrgns
  • 688428 View
  • 594 Score
  • 39 Answer
  • Tags:   javascript html

25 Answered Questions

4 Answered Questions

[SOLVED] How do you disable input value on web form field / input tag?

17 Answered Questions

[SOLVED] Is there a W3C valid way to disable autocomplete in a HTML form?

Sponsored Content