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

[{'answer_id': 2531, 'author': 'nlucaroni', 'author_id': 157, 'author_profile': 'https://Stackoverflow.com/users/157', 'pm_score': 12, 'selected': True, 'text': '<p>Firefox 30 ignores <code>autocomplete=&quot;off&quot;</code> for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c100" rel="noreferrer">commentary</a> from May 5, 2014:</p>\n<blockquote>\n<ul>\n<li>The password manager <em>always</em> prompts if it wants to save a password. Passwords are not saved without permission from the user.</li>\n<li>We are the third browser to implement this change, after IE and Chrome.</li>\n</ul>\n</blockquote>\n<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="noreferrer">Mozilla Developer Network</a> documentation, the Boolean form element attribute <code>autocomplete</code> prevents form data from being cached in older browsers.</p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;foo&quot; autocomplete=&quot;off&quot; /&gt;\n</code></pre>\n'}, {'answer_id': 2536, 'author': 'Teifion', 'author_id': 1384652, 'author_profile': 'https://Stackoverflow.com/users/1384652', 'pm_score': 4, 'selected': False, 'text': '<p>Use a non-standard name and id for the fields, so rather than &quot;name&quot; have &quot;name_&quot;. Browsers will then not see it as being the name field.</p>\n<p>The best part about it is that you can do this to some, but not all, fields and it will autocomplete some, but not all fields.</p>\n'}, {'answer_id': 2537, 'author': 'brendan', 'author_id': 225, 'author_profile': 'https://Stackoverflow.com/users/225', 'pm_score': 7, 'selected': False, 'text': '<pre><code>&lt;form name=&quot;form1&quot; id=&quot;form1&quot; method=&quot;post&quot;\n      autocomplete=&quot;off&quot; action=&quot;http://www.example.com/form.cgi&quot;&gt;\n</code></pre>\n<p>This will work in Internet Explorer and Mozilla Firefox. The downside is that it is not XHTML standard.</p>\n'}, {'answer_id': 2542, 'author': 'EndangeredMassa', 'author_id': 106, 'author_profile': 'https://Stackoverflow.com/users/106', 'pm_score': 5, 'selected': False, 'text': '<p>Just set <code>autocomplete="off"</code>. There is a very good reason for doing this: You want to provide your own autocomplete functionality!</p>\n'}, {'answer_id': 50484, 'author': 'Antti Kissaniemi', 'author_id': 2948, 'author_profile': 'https://Stackoverflow.com/users/2948', 'pm_score': 5, 'selected': False, 'text': '<p>On a related or actually, on the completely opposite note - </p>\n\n<blockquote>\n  <p>"If you\'re the user of the aforementioned form and want to re-enable\n  the autocomplete functionality, use the \'remember password\'\n  bookmarklet from this <a href="https://www.squarefree.com/bookmarklets/forms.html" rel="noreferrer">bookmarklets\n  page</a>. It removes\n  all <code>autocomplete="off"</code> attributes from all forms on the page. Keep\n  fighting the good fight!"</p>\n</blockquote>\n'}, {'answer_id': 73654, 'author': 'Jon Adams', 'author_id': 2291, 'author_profile': 'https://Stackoverflow.com/users/2291', 'pm_score': 5, 'selected': False, 'text': "<p>We did actually use <em>sasb</em>'s idea for one site.</p>\n<p>It was a medical software web app to run a doctor's office. However, many of our clients were surgeons who used lots of different workstations, including semi-public terminals. So, they wanted to make sure that a doctor who doesn't understand the implication of auto-saved passwords or isn't paying attention can't accidentally leave their login information easily accessible.</p>\n<p>Of course, this was before the idea of private browsing that is starting to be featured in Internet\xa0Explorer\xa08, Firefox\xa03.1, etc. Even so, many physicians are forced to use old school browsers in hospitals with IT that won't change.</p>\n<p>So, we had the login page generate random field names that would only work for that post. Yes, it's less convenient, but it's just hitting the user over the head about not storing login information on public terminals.</p>\n"}, {'answer_id': 218453, 'author': 'Ben Combee', 'author_id': 1323, 'author_profile': 'https://Stackoverflow.com/users/1323', 'pm_score': 9, 'selected': False, 'text': "<p>In addition to setting <code>autocomplete=off</code>, you could also have your form field names be randomized by the code that generates the page, perhaps by adding some session-specific string to the end of the names.</p>\n<p>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.</p>\n"}, {'answer_id': 474611, 'author': 'Sam Hasler', 'author_id': 2541, 'author_profile': 'https://Stackoverflow.com/users/2541', 'pm_score': 6, 'selected': False, 'text': '<p>As others have said, the answer is <code>autocomplete=&quot;off&quot;</code>.</p>\n<p>However, I think it\'s worth stating <strong>why</strong> it\'s a good idea to use this in certain cases as some answers to this and <a href="https://stackoverflow.com/questions/471800/how-i-do-to-force-the-browser-to-not-store-the-html-form-field-data">duplicate questions</a> have suggested it\'s better not to turn it off.</p>\n<p>Stopping browsers storing credit card numbers shouldn\'t be left to users. Too many users won\'t even realize it\'s a problem.</p>\n<p>It\'s particularly important to turn it off on fields for credit card security codes. As <a href="http://www.mollerus.net/tom/blog/2007/05/my_best_practices_for_online_credit_card_security.html" rel="nofollow noreferrer">this page</a> states:</p>\n<blockquote>\n<p>&quot;Never store the security code ... its value depends on the presumption that the only way to supply it is to read it from the physical credit card, proving that the person supplying it actually holds the card.&quot;</p>\n</blockquote>\n<p>The problem is, if it\'s a public computer (cyber cafe, library, etc.), it\'s then easy for other users to steal your card details, and even on your own machine a malicious website could <a href="http://webreflection.blogspot.com/2008/09/security-basis-and-internet-explorer.html" rel="nofollow noreferrer">steal autocomplete data</a>.</p>\n'}, {'answer_id': 4423265, 'author': 'cherouvim', 'author_id': 72478, 'author_profile': 'https://Stackoverflow.com/users/72478', 'pm_score': 4, 'selected': False, 'text': "<p>In order to avoid the invalid XHTML, you can set this attribute using JavaScript. An example using jQuery:</p>\n<pre><code>&lt;input type=&quot;text&quot; class=&quot;noAutoComplete&quot; ... /&gt;\n\n$(function() {\n    $('.noAutoComplete').attr('autocomplete', 'off');\n});\n</code></pre>\n<p>The problem is that users without JavaScript will get the autocomplete functionality.</p>\n"}, {'answer_id': 4965846, 'author': 'Hash', 'author_id': 360048, 'author_profile': 'https://Stackoverflow.com/users/360048', 'pm_score': 4, 'selected': False, 'text': '<p>Adding the </p>\n\n<p><code>autocomplete="off"</code> </p>\n\n<p>to the form tag will disable the browser autocomplete (what was previously typed into that field) from all <code>input</code> fields within that particular form.</p>\n\n<p>Tested on:</p>\n\n<ul>\n<li>Firefox 3.5, 4 BETA </li>\n<li>Internet Explorer 8 </li>\n<li>Chrome</li>\n</ul>\n'}, {'answer_id': 5098590, 'author': 'user631300', 'author_id': 631300, 'author_profile': 'https://Stackoverflow.com/users/631300', 'pm_score': 4, 'selected': False, 'text': "<p>I think <code>autocomplete=off</code> is supported in HTML 5.</p>\n\n<p>Ask yourself why you want to do this though - it may make sense in some situations but don't do it just for the sake of doing it.</p>\n\n<p>It's less convenient for users and not even a security issue in OS X (mentioned by Soren below). If you're worried about people having their passwords stolen remotely - a keystroke logger could still do it even though your app uses <code>autcomplete=off</code>.</p>\n\n<p>As a user who chooses to have a browser remember (most of) my information, I'd find it annoying if your site didn't remember mine.</p>\n"}, {'answer_id': 7451656, 'author': 'Securatek', 'author_id': 949742, 'author_profile': 'https://Stackoverflow.com/users/949742', 'pm_score': 5, 'selected': False, 'text': "<p>I'd have to beg to differ with those answers that say to avoid disabling auto-complete.</p>\n\n<p>The first thing to bring up is that auto-complete not being explicitly disabled on login form fields is a PCI-DSS fail. In addition, if a users' local machine is compromised then any autocomplete data can be trivially obtained by an attacker due to it being stored in the clear.</p>\n\n<p>There is certainly an argument for usability, however there's a very fine balance when it comes to which form fields should have autocomplete disabled and which should not.</p>\n"}, {'answer_id': 13199843, 'author': 'xxxxx', 'author_id': 1794937, 'author_profile': 'https://Stackoverflow.com/users/1794937', 'pm_score': 3, 'selected': False, 'text': '<p>You may use it in <code>input</code>.</p>\n<p>For example;</p>\n<pre><code>&lt;input type=text name=&quot;test&quot; autocomplete=&quot;off&quot; /&gt;\n</code></pre>\n'}, {'answer_id': 13709435, 'author': 'jeff', 'author_id': 1876671, 'author_profile': 'https://Stackoverflow.com/users/1876671', 'pm_score': 4, 'selected': False, 'text': "<p>Try these too if just <code>autocomplete=&quot;off&quot;</code> doesn't work:</p>\n<pre><code>autocorrect=&quot;off&quot; autocapitalize=&quot;off&quot; autocomplete=&quot;off&quot;\n</code></pre>\n"}, {'answer_id': 15496456, 'author': 'yajay', 'author_id': 2135057, 'author_profile': 'https://Stackoverflow.com/users/2135057', 'pm_score': 5, 'selected': False, 'text': "<p>Three options:</p>\n<p>First:</p>\n<pre><code>&lt;input type='text' autocomplete='off' /&gt;\n</code></pre>\n<p>Second:</p>\n<pre><code>&lt;form action='' autocomplete='off'&gt;\n</code></pre>\n<p>Third (JavaScript code):</p>\n<pre><code>$('input').attr('autocomplete', 'off');\n</code></pre>\n"}, {'answer_id': 18259776, 'author': 'lifo', 'author_id': 795819, 'author_profile': 'https://Stackoverflow.com/users/795819', 'pm_score': 5, 'selected': False, 'text': '<p>None of the solutions worked for me in this conversation.</p>\n<p>I finally figured out a <strong>pure HTML solution</strong> that doesn\'t require <strong>any JavaScript</strong>, works in modern browsers (except Internet\xa0Explorer; there had to at least be one catch, right?), and does not require you to disable autocomplete for the entire form.</p>\n<p>Simply turn off autocomplete on the <code>form</code> and then turn it ON for any <code>input</code> you wish it to work within the form. For example:</p>\n<pre class="lang-html prettyprint-override"><code>&lt;form autocomplete=&quot;off&quot;&gt;\n    &lt;!-- These inputs will not allow autocomplete and Chrome\n         won\'t highlight them yellow! --&gt;\n    &lt;input name=&quot;username&quot;  /&gt;\n    &lt;input name=&quot;password&quot; type=&quot;password&quot; /&gt;\n    &lt;!-- This field will allow autocomplete to work even\n         though we\'ve disabled it on the form --&gt;\n    &lt;input name=&quot;another_field&quot; autocomplete=&quot;on&quot; /&gt;\n&lt;/form&gt;\n</code></pre>\n'}, {'answer_id': 23234498, 'author': 'apinstein', 'author_id': 72114, 'author_profile': 'https://Stackoverflow.com/users/72114', 'pm_score': 8, 'selected': False, 'text': '<p>Most of the major browsers and password managers (correctly, IMHO) now ignore <code>autocomplete=off</code>. </p>\n\n<p>Why? Many banks and other "high security" websites added <code>autocomplete=off</code> to their login pages "for security purposes" but this actually decreases security since it causes people to change the passwords on these high-security sites to be easy to remember (and thus crack) since autocomplete was broken. </p>\n\n<p>Long ago most password managers started ignoring <code>autocomplete=off</code>, and now the browsers are starting to do the same for username/password inputs only.</p>\n\n<p>Unfortunately, bugs in the autocomplete implementations insert username and/or password info into inappropriate form fields, causing form validation errors, or worse yet, accidentally inserting usernames into fields that were intentionally left blank by the user.</p>\n\n<p>What\'s a web developer to do?</p>\n\n<ul>\n<li>If you can keep all password fields on a page by themselves, that\'s a great start as it seems that the presence of a password field is the main trigger for user/pass autocomplete to kick in. Otherwise, read the tips below.</li>\n<li><strong>Safari</strong> notices that there are 2 password fields and disables autocomplete in this case, assuming it must be a change password form, not a login form. So just be sure to use 2 password fields (new and confirm new) for any forms where you allow </li>\n<li><p><strong>Chrome</strong> 34, unfortunately, will try to autofill fields with user/pass whenever it sees a password field. This is quite a bad bug that hopefully, they will change the Safari behavior. However, adding this to the top of your form seems to disable the password autofill:</p>\n\n<pre><code>&lt;input type="text" style="display:none"&gt;\n&lt;input type="password" style="display:none"&gt;\n</code></pre></li>\n</ul>\n\n<p>I haven\'t yet investigated IE or Firefox thoroughly but will be happy to update the answer if others have info in the comments.</p>\n'}, {'answer_id': 24247840, 'author': 'dsuess', 'author_id': 2354488, 'author_profile': 'https://Stackoverflow.com/users/2354488', 'pm_score': 8, 'selected': False, 'text': '<p>Sometimes <strong>even autocomplete=off</strong> would <strong>not prevent to fill</strong> in credentials into the wrong fields, but not a user or nickname field.</p>\n<p>This workaround is in addition to <a href="https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags/23234498#23234498">apinstein\'s post</a> about browser behavior.</p>\n<h3>Fix browser autofill in read-only and set writable on focus (click and tab)</h3>\n<pre><code> &lt;input type=&quot;password&quot; readonly\n     onfocus=&quot;this.removeAttribute(\'readonly\');&quot;/&gt;\n</code></pre>\n<p>Update:</p>\n<p>Mobile Safari sets cursor in the field, but it does not show the virtual keyboard. The new fix works like before, but it handles the virtual keyboard:</p>\n<pre><code>&lt;input id=&quot;email&quot; readonly type=&quot;email&quot; onfocus=&quot;if (this.hasAttribute(\'readonly\')) {\n    this.removeAttribute(\'readonly\');\n    // fix for mobile safari to show virtual keyboard\n    this.blur();    this.focus();  }&quot; /&gt;\n</code></pre>\n<p>Live Demo <a href="https://jsfiddle.net/danielsuess/n0scguv6/" rel="noreferrer">https://jsfiddle.net/danielsuess/n0scguv6/</a></p>\n<p>// UpdateEnd</p>\n<p><strong>Because the browser auto fills credentials to wrong text field!?</strong></p>\n<p>I notice this strange behavior on Chrome and Safari, when there are password fields in <em>the same form.</em> I guess the browser looks for a password field to insert your saved credentials. Then it auto fills (just guessing due to observation) the nearest textlike-input field, that appears prior the password field in the DOM. As the browser is the last instance and you can not control it.</p>\n<p>This readonly-fix above worked for me.</p>\n'}, {'answer_id': 29982284, 'author': 'Fery Kaszoni', 'author_id': 1763068, 'author_profile': 'https://Stackoverflow.com/users/1763068', 'pm_score': 5, 'selected': False, 'text': '<p>I\'ve been trying endless solutions, and then I found this:</p>\n\n<p>Instead of <code>autocomplete="off"</code> just simply use <code>autocomplete="false"</code></p>\n\n<p>As simple as that, and it works like a charm in Google Chrome as well!</p>\n'}, {'answer_id': 30606101, 'author': 'Simmoniz', 'author_id': 651987, 'author_profile': 'https://Stackoverflow.com/users/651987', 'pm_score': 4, 'selected': False, 'text': '<p>This is a security issue that browsers ignore now. Browsers identify and store content using input names, even if developers consider the information to be sensitive and should not be stored.</p>\n<p>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).</p>\n<p>Asking the user to activate or deactivate options in their browser\'s settings is not a good solution. The issue can be fixed in the backend.</p>\n<p>Here\'s the fix. All autocomplete elements are generated with a hidden input like this:</p>\n<pre><code>&lt;?php $r = md5(rand() . microtime(TRUE)); ?&gt;\n&lt;form method=&quot;POST&quot; action=&quot;./&quot;&gt;\n    &lt;input type=&quot;text&quot; name=&quot;&lt;?php echo $r; ?&gt;&quot; /&gt;\n    &lt;input type=&quot;hidden&quot; name=&quot;__autocomplete_fix_&lt;?php echo $r; ?&gt;&quot; value=&quot;username&quot; /&gt;\n    &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;submit&quot; /&gt;\n&lt;/form&gt;\n</code></pre>\n<p>The server then processes the post variables like this: (<a href="https://3v4l.org/kBJtN" rel="nofollow noreferrer">Demo</a>)</p>\n<pre><code>foreach ($_POST as $key =&gt; $val) {\n    $newKey = preg_replace(\'~^__autocomplete_fix_~\', \'\', $key, 1, $count);\n    if ($count) {\n        $_POST[$val] = $_POST[$newKey];\n        unset($_POST[$key], $_POST[$newKey]);\n    }\n}\n</code></pre>\n<p>The value can be accessed as usual</p>\n<pre><code>echo $_POST[\'username\'];\n</code></pre>\n<p>And the browser won\'t be able to suggest information from the previous request or from previous users.</p>\n<p>This will continue to work even if browsers update their techniques to ignore/respect autocomplete attributes.</p>\n'}, {'answer_id': 31182333, 'author': 'Jakob Løkke Madsen', 'author_id': 245540, 'author_profile': 'https://Stackoverflow.com/users/245540', 'pm_score': 3, 'selected': False, 'text': '<p>None of the hacks mentioned here worked for me in Chrome.\nThere\'s a discussion of the issue here: <a href="https://code.google.com/p/chromium/issues/detail?id=468153#c41" rel="noreferrer">https://code.google.com/p/chromium/issues/detail?id=468153#c41</a></p>\n\n<p>Adding this inside a <code>&lt;form&gt;</code> works (at least for now):</p>\n\n<pre><code>&lt;div style="display: none;"&gt;\n    &lt;input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" /&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 31995706, 'author': 'WolfyD', 'author_id': 2192923, 'author_profile': 'https://Stackoverflow.com/users/2192923', 'pm_score': 2, 'selected': False, 'text': '<p>It could be important to know that Firefox (I think only Firefox) uses a value called <code>ismxfilled</code> that basically forces autocomplete.</p>\n<p><code>ismxfilled=&quot;0&quot;</code> for <code>OFF</code></p>\n<p>or</p>\n<p><code>ismxfilled=&quot;1&quot;</code> for <code>ON</code></p>\n'}, {'answer_id': 33396540, 'author': 'Matas Vaitkevicius', 'author_id': 1509764, 'author_profile': 'https://Stackoverflow.com/users/1509764', 'pm_score': 4, 'selected': False, 'text': "<p>Adding <code>autocomplete=&quot;off&quot;</code> is not going to cut it.</p>\n<p>Change the <code>input</code> type attribute to <code>type=&quot;search&quot;</code>.<br />\nGoogle doesn't apply auto-fill to inputs with a type of search.</p>\n"}, {'answer_id': 33461229, 'author': 'pronebird', 'author_id': 351305, 'author_profile': 'https://Stackoverflow.com/users/351305', 'pm_score': 2, 'selected': False, 'text': "<p>Safari does not change its mind about autocomplete if you set <code>autocomplete=&quot;off&quot;</code> dynamically from JavaScript. However, it would respect if you do that on per-field basis.</p>\n<pre><code>$(':input', $formElement).attr('autocomplete', 'off');\n</code></pre>\n"}, {'answer_id': 33736066, 'author': 'Tamilselvan K', 'author_id': 3089813, 'author_profile': 'https://Stackoverflow.com/users/3089813', 'pm_score': 3, 'selected': False, 'text': "<pre><code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;\n    $(document).ready(function () {\n        try {\n            $(&quot;input[type='text']&quot;).each(\n                function(){\n                   $(this).attr(&quot;autocomplete&quot;, &quot;off&quot;);\n                });\n        }\n        catch (e) {\n        }\n    });\n&lt;/script&gt;\n</code></pre>\n"}, {'answer_id': 34192660, 'author': 'Blair Anderson', 'author_id': 1536309, 'author_profile': 'https://Stackoverflow.com/users/1536309', 'pm_score': 3, 'selected': False, 'text': '<p>Chrome is <a href="https://code.google.com/p/chromium/issues/detail?id=468153#c123" rel="nofollow noreferrer">planning to support this</a>.</p>\n<p>For now the best suggestion is to use an input type that is rarely autocompleted.</p>\n<p><a href="https://code.google.com/p/chromium/issues/detail?id=468153#c33" rel="nofollow noreferrer">Chrome discussion</a></p>\n<pre><code>&lt;input type=\'search\' name=&quot;whatever&quot; /&gt;\n</code></pre>\n<p>To be compatible with Firefox, use normal autocomplete=\'off\'</p>\n<pre><code>&lt;input type=\'search\' name=&quot;whatever&quot; autocomplete=\'off\' /&gt;\n</code></pre>\n'}, {'answer_id': 35631507, 'author': 'jcubic', 'author_id': 387194, 'author_profile': 'https://Stackoverflow.com/users/387194', 'pm_score': 3, 'selected': False, 'text': '<p>You can disable autocomplete if you remove the <code>form</code> tag.</p>\n<p>The same was done by my bank and I was wondering how they did this. It even removes the value that was already remembered by the browser after you remove the tag.</p>\n'}, {'answer_id': 36098082, 'author': 'Debendra Dash', 'author_id': 5418530, 'author_profile': 'https://Stackoverflow.com/users/5418530', 'pm_score': 3, 'selected': False, 'text': '<p>This is what we called autocomplete of a textbox.</p>\n<p><a href="https://i.stack.imgur.com/6mr93.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6mr93.png" alt="Enter image description here" /></a></p>\n<p>We can disable autocomplete of a Textbox in two ways:</p>\n<ol>\n<li><p>By Browser Label</p>\n</li>\n<li><p>By Code</p>\n<p>To disable in a browser, go to the setting</p>\n</li>\n</ol>\n<p><a href="https://i.stack.imgur.com/3nHbK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nHbK.png" alt="To disable in the browser, go to the setting" /></a></p>\n<p><a href="https://i.stack.imgur.com/4QqJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4QqJL.png" alt="Go to Advanced Settings and uncheck the checkbox and then Restore." /></a></p>\n<p>Go to <em>Advanced Settings</em> and uncheck the checkbox and then Restore.</p>\n<p>If you want to disable in coding label you can do as follows -</p>\n<p>Using <code>AutoCompleteType=&quot;Disabled&quot;</code>:</p>\n<pre><code>&lt;asp:TextBox runat=&quot;server&quot; ID=&quot;txt_userid&quot; AutoCompleteType=&quot;Disabled&quot;&gt;&lt;/asp:TextBox&gt;\n</code></pre>\n<p>By Setting Form <code>autocomplete=&quot;off&quot;</code>:</p>\n<pre><code>&lt;asp:TextBox runat=&quot;server&quot; ID=&quot;txt_userid&quot; autocomplete=&quot;off&quot;&gt;&lt;/asp:TextBox&gt;\n</code></pre>\n<p>By Setting Form <code>autocomplete=&quot;off&quot;</code>:</p>\n<pre><code>&lt;form id=&quot;form1&quot; runat=&quot;server&quot; autocomplete=&quot;off&quot;&gt;\n    // Your content\n&lt;/form&gt;\n</code></pre>\n<p>By using code in the .cs page:</p>\n<pre><code>protected void Page_Load(object sender, EventArgs e)\n{\n    if(!Page.IsPostBack)\n    {\n        txt_userid.Attributes.Add(&quot;autocomplete&quot;, &quot;off&quot;);\n    }\n}\n</code></pre>\n<p><strong>By using jQuery</strong></p>\n<pre><code>&lt;head runat=&quot;server&quot;&gt;\n    &lt;title&gt;&lt;/title&gt;\n\n    &lt;script src=&quot;Scripts/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;\n\n    &lt;script type=&quot;text/javascript&quot;&gt;\n        $(document).ready(function () {\n            $(\'#txt_userid\').attr(\'autocomplete\', \'off\');\n        });\n    &lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 36163629, 'author': 'AAH-Shoot', 'author_id': 214145, 'author_profile': 'https://Stackoverflow.com/users/214145', 'pm_score': 4, 'selected': False, 'text': '<p>I just ran into this problem and tried several failures, but this one works for me (found on <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">MDN</a>):</p>\n<blockquote>\n<p>In some cases, the browser will keep suggesting autocompletion values\neven if the autocomplete attribute is set to off. This unexpected\nbehavior can be quite puzzling for developers. The trick to really\nforce the no-completion is to assign a random string to the attribute\nlike so:</p>\n</blockquote>\n<pre><code>autocomplete=&quot;nope&quot;\n</code></pre>\n'}, {'answer_id': 36809948, 'author': 'Ben', 'author_id': 4244674, 'author_profile': 'https://Stackoverflow.com/users/4244674', 'pm_score': 4, 'selected': False, 'text': '<p>I can\'t believe this is still an issue so long after it\'s been reported. The previous solutions didn\'t work for me, as <a href="https://en.wikipedia.org/wiki/Safari_%28web_browser%29" rel="nofollow noreferrer">Safari</a> seemed to know when the element was not displayed or off-screen, however the following did work for me:</p>\n<pre><code>&lt;div style=&quot;height:0px; overflow:hidden; &quot;&gt;\n  Username &lt;input type=&quot;text&quot; name=&quot;fake_safari_username&quot; &gt;\n  Password &lt;input type=&quot;password&quot; name=&quot;fake_safari_password&quot;&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 36900517, 'author': 'Jason L.', 'author_id': 3442448, 'author_profile': 'https://Stackoverflow.com/users/3442448', 'pm_score': 3, 'selected': False, 'text': '<p>If your issue is having a password field being auto-completed, then you may find this useful...</p>\n\n<p>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.</p>\n\n<pre><code>&lt;!-- This is a fake password input to defeat the browser\'s autofill behavior --&gt;\n&lt;input type="password" id="txtPassword" style="display:none;" /&gt;\n&lt;!-- This is the real password input --&gt;\n&lt;input type="password" id="txtThisIsTheRealPassword" /&gt;\n</code></pre>\n\n<p>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.</p>\n'}, {'answer_id': 37514329, 'author': 'Stav Bodik', 'author_id': 4120180, 'author_profile': 'https://Stackoverflow.com/users/4120180', 'pm_score': 4, 'selected': False, 'text': '<p>So here is it:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>function turnOnPasswordStyle() {\r\n  $(\'#inputpassword\').attr(\'type\', "password");\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input oninput="turnOnPasswordStyle()" id="inputpassword" type="text"&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 37856900, 'author': 'Peter', 'author_id': 4161621, 'author_profile': 'https://Stackoverflow.com/users/4161621', 'pm_score': 3, 'selected': False, 'text': '<p><a href="https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags/24247840#24247840">The answer <strong>dsuess</strong> posted</a> with the readonly was very clever and worked.</p>\n<p>But as I am using <a href="https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29" rel="nofollow noreferrer">Bootstrap</a>, 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.</p>\n<p>So I had an idea to implement this into a jQuery solution:</p>\n<pre><code>jQuery(document).ready(function () {\n    $(&quot;input&quot;).attr(\'readonly\', true);\n    $(&quot;input&quot;).removeAttr(\'readonly\');\n});\n</code></pre>\n'}, {'answer_id': 38333163, 'author': 'Master DJon', 'author_id': 214898, 'author_profile': 'https://Stackoverflow.com/users/214898', 'pm_score': 3, 'selected': False, 'text': "<p>My problem was mostly autofill with Chrome, but I think this is probably more problematic than autocomplete.</p>\n<p>Trick: using a timer to reset the form and set the password fields to blank. The 100\xa0ms duration seems to be the minimum for it to work.</p>\n<pre><code>$(document).ready(function() {\n    setTimeout(function() {\n        var $form = $('#formId');\n        $form[0].reset();\n        $form.find('INPUT[type=password]').val('');\n    }, 100);\n});\n</code></pre>\n"}, {'answer_id': 39289929, 'author': 'Oleg', 'author_id': 676479, 'author_profile': 'https://Stackoverflow.com/users/676479', 'pm_score': 2, 'selected': False, 'text': "<p>The idea is to create an invisible field with the same name before the original one. That will make the browser auto populate the hidden field.</p>\n<p>I use the following jQuery snippet:</p>\n<pre><code>// Prevent input autocomplete\n$.fn.preventAutocomplete = function() {\n    this.each(function () {\n        var $el = $(this);\n        $el\n            .clone(false, false) // Make a copy (except events)\n            .insertBefore($el)   // Place it before original field\n            .prop('id', '')      // Prevent ID duplicates\n            .hide()              // Make it invisible for user\n        ;\n    });\n};\n</code></pre>\n<p>And then just <code>$('#login-form input').preventAutocomplete();</code></p>\n"}, {'answer_id': 40214729, 'author': 'Dag Høidahl', 'author_id': 22146, 'author_profile': 'https://Stackoverflow.com/users/22146', 'pm_score': 2, 'selected': False, 'text': '<p>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:</p>\n\n<p>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.</p>\n\n<p>So in this case, autofill from a password manager becomes a double problem, because the input won\'t even be visible to the user.</p>\n\n<p>The solution was to have the checkbox trigger whether the password field is inserted in the DOM, not just its visibility.</p>\n\n<p>Pseudo implementation for AngularJS:</p>\n\n<pre><code>&lt;input type="checkbox" ng-model="createPassword"&gt;\n&lt;input ng-if="changePassword" type="password"&gt;\n</code></pre>\n'}, {'answer_id': 40661608, 'author': 'Alexander Ryan Baggett', 'author_id': 1810205, 'author_profile': 'https://Stackoverflow.com/users/1810205', 'pm_score': 1, 'selected': False, 'text': '<p>With regards to Internet Explorer 11, there is a security feature in place that can be used to block autocomplete.</p>\n<p>It works like this:</p>\n<p>Any form input value that is modified in JavaScript <em>after</em> the user has already entered it is flagged as ineligible for autocomplete.</p>\n<p>This feature is normally used to protect users from malicious websites that want to change your password after you enter it or the like.</p>\n<p>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.</p>\n'}, {'answer_id': 40791726, 'author': 'Geynen', 'author_id': 6141959, 'author_profile': 'https://Stackoverflow.com/users/6141959', 'pm_score': 7, 'selected': False, 'text': '<p>The solution for Chrome is to add <code>autocomplete=&quot;new-password&quot;</code> to the input type password. Please check the example below.</p>\n<p>Example:</p>\n<pre><code>&lt;form name=&quot;myForm&quot;&quot; method=&quot;post&quot;&gt;\n   &lt;input name=&quot;user&quot; type=&quot;text&quot; /&gt;\n   &lt;input name=&quot;pass&quot; type=&quot;password&quot; autocomplete=&quot;new-password&quot; /&gt;\n   &lt;input type=&quot;submit&quot;&gt;\n&lt;/form&gt;\n</code></pre>\n<p>Chrome always autocomplete the data if it finds a box of <em>type password</em>, just enough to indicate for that box <code>autocomplete = &quot;new-password&quot;</code>.</p>\n<blockquote>\n<p>This works well for me.</p>\n</blockquote>\n<p>Note: make sure with <kbd>F12</kbd> that your changes take effect. Many times, browsers save the page in the cache, and this gave me a bad impression that it did not work, but the browser did not actually bring the changes.</p>\n'}, {'answer_id': 41398325, 'author': 'Muhammad Awais', 'author_id': 3901944, 'author_profile': 'https://Stackoverflow.com/users/3901944', 'pm_score': 5, 'selected': False, 'text': '<p>This works for me.</p>\n\n<pre><code>&lt;input name="pass" type="password" autocomplete="new-password" /&gt;\n</code></pre>\n\n<p>We can also use this strategy in other controls like text, select etc</p>\n'}, {'answer_id': 42506164, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>It doesn\'t seem to be possible to achieve this without using a combination client side and server side code.</p>\n\n<p>In order to make sure that the user must fill in the form every time without autocomplete I use the following techniques:</p>\n\n<ol>\n<li><p>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.</p></li>\n<li><p>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.</p></li>\n</ol>\n\n<p>Here is a fiddle that demonstrates the javascript, css and html as described in #2 <a href="https://jsfiddle.net/xnbxbpv4/" rel="nofollow noreferrer">https://jsfiddle.net/xnbxbpv4/</a></p>\n\n<p>javascript:  </p>\n\n<pre><code>$(document).ready(function() {\n    $(".disable-input").attr("disabled", "disabled");\n});\n</code></pre>\n\n<p>css:  </p>\n\n<pre class="lang-css prettyprint-override"><code>.disable-input {\n  display: none;\n}\n</code></pre>\n\n<p>html:  </p>\n\n<pre><code>&lt;form&gt;\n&lt;input type="email" name="username" placeholder="username" class="disable-input"&gt;\n&lt;input type="email" name="username" placeholder="username"&gt;\n&lt;input type="email" name="username" placeholder="username" class="disable-input"&gt;\n&lt;br&gt;\n&lt;input type="password" name="password" placeholder="password" class="disable-input"&gt;\n&lt;input type="password" name="password" placeholder="password"&gt;\n&lt;input type="password" name="password" placeholder="password" class="disable-input"&gt;\n&lt;br&gt;\n&lt;input type="submit" value="submit"&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>Here is a rough example of what the server code using asp.net with razor would be to facilitate #1</p>\n\n<p>model:   </p>\n\n<pre><code>public class FormModel\n{\n    public string Username { get; set; }\n    public string Password { get; set; }\n}\n</code></pre>\n\n<p>controller:  </p>\n\n<pre><code>public class FormController : Controller\n{\n    public ActionResult Form()\n    {\n        var m = new FormModel();\n\n        m.Username = "F" + Guid.NewGuid().ToString();\n        m.Password = "F" + Guid.NewGuid().ToString();\n\n        return View(m);\n    }\n\n    public ActionResult Form(FormModel m)\n    {\n        var u = Request.Form[m.Username];\n        var p = Request.Form[m.Password];\n\n        // todo: do something with the form values\n\n        ...\n\n        return View(m);\n    }\n}\n</code></pre>\n\n<p>view:</p>\n\n<pre><code>@model FormModel\n\n@using (Html.BeginForm("Form", "Form"))\n{\n    @Html.HiddenFor(m =&gt; m.UserName)\n    @Html.HiddenFor(m =&gt; m.Password)\n\n    &lt;input type="email" name="@Model.Username" placeholder="username" class="disable-input"&gt;\n    &lt;input type="email" name="@Model.Username" placeholder="username"&gt;\n    &lt;input type="email" name="@Model.Username" placeholder="username" class="disable-input"&gt;\n    &lt;br&gt;\n    &lt;input type="password" name="@Model.Password" placeholder="password" class="disable-input"&gt;\n    &lt;input type="password" name="@Model.Password" placeholder="password"&gt;\n    &lt;input type="password" name="@Model.Password" placeholder="password" class="disable-input"&gt;\n    &lt;br&gt;\n    &lt;input type="submit" value="submit"&gt;\n}\n</code></pre>\n'}, {'answer_id': 42751929, 'author': 'Sam', 'author_id': 5235734, 'author_profile': 'https://Stackoverflow.com/users/5235734', 'pm_score': 1, 'selected': False, 'text': '<p>autocomplete = \'off\' didn\'t work for me, anyway i set the value attribute of the input field to a space i.e <code>&lt;input type=\'text\' name=\'username\' value=" "&gt;</code> that set the default input character to a space, and since the username was blank the password was cleared too. </p>\n'}, {'answer_id': 42782309, 'author': 'Mohaimin Moin', 'author_id': 4574992, 'author_profile': 'https://Stackoverflow.com/users/4574992', 'pm_score': 3, 'selected': False, 'text': '<p>I use this <code>TextMode="password" autocomplete="new-password"</code> and in in page load in aspx <code>txtPassword.Attributes.Add("value", \'\');</code></p>\n'}, {'answer_id': 47055960, 'author': 'Murat Yıldız', 'author_id': 1604048, 'author_profile': 'https://Stackoverflow.com/users/1604048', 'pm_score': 5, 'selected': False, 'text': '<blockquote>\n  <p>In addition to</p>\n</blockquote>\n\n<pre><code>autocomplete="off"\n</code></pre>\n\n<blockquote>\n  <p>Use</p>\n</blockquote>\n\n<pre><code>readonly onfocus="this.removeAttribute(\'readonly\');"\n</code></pre>\n\n<p>for the inputs that you do not want them to remember form data (<code>username</code>, <code>password</code>, etc.) as shown below: </p>\n\n<pre><code>&lt;input type="text" name="UserName" autocomplete="off" readonly \n    onfocus="this.removeAttribute(\'readonly\');" &gt;\n\n&lt;input type="password" name="Password" autocomplete="off" readonly \n    onfocus="this.removeAttribute(\'readonly\');" &gt;\n</code></pre>\n\n<p>Hope this helps.</p>\n'}, {'answer_id': 47429938, 'author': 'zinczinc', 'author_id': 3428605, 'author_profile': 'https://Stackoverflow.com/users/3428605', 'pm_score': 1, 'selected': False, 'text': '<p>None of the provided answers worked on all the browsers I tested. Building on already provided answers, this is what I ended up with, (tested) on <strong>Chrome 61</strong>, <strong>Microsoft Edge 40</strong> (EdgeHTML 15), <strong>IE 11</strong>, <strong>Firefox 57</strong>, <strong>Opera 49</strong> and <strong>Safari 5.1</strong>. It is wacky as a result of many trials; however it does work for me.</p>\n\n<pre><code>&lt;form autocomplete="off"&gt;\n    ...\n    &lt;input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute(\'readonly\');" onfocus="this.removeAttribute(\'readonly\');" onfocusin="this.removeAttribute(\'readonly\');" onfocusout="this.setAttribute(\'readonly\');" /&gt;\n    ...\n&lt;/form&gt; \n\n&lt;script type="text/javascript"&gt;\n    $(function () {           \n        $(\'input#Password\').val(\'\');\n        $(\'input#Password\').on(\'focus\', function () {\n        if (!$(this).val() || $(this).val().length &lt; 2) {\n            $(this).attr(\'type\', \'text\');\n        }\n        else {\n            $(this).attr(\'type\', \'password\');\n        }\n    });\n    $(\'input#Password\').on(\'keyup\', function () {\n        if (!$(this).val() || $(this).val().length &lt; 2) {\n            $(this).attr(\'type\', \'text\');\n        }\n        else {\n            $(this).attr(\'type\', \'password\');\n        }\n    });\n    $(\'input#Password\').on(\'keydown\', function () {\n        if (!$(this).val() || $(this).val().length &lt; 2) {\n            $(this).attr(\'type\', \'text\');\n        }\n        else {\n            $(this).attr(\'type\', \'password\');\n        }\n    });\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 47917988, 'author': 'hien', 'author_id': 4477343, 'author_profile': 'https://Stackoverflow.com/users/4477343', 'pm_score': 3, 'selected': False, 'text': '<p>Many modern browsers do not support autocomplete="off" for login fields anymore.\n<code>autocomplete="new-password"</code> is wokring instead, more information <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="noreferrer">MDN docs</a></p>\n'}, {'answer_id': 48341687, 'author': 'Palaniichuk Dmytro', 'author_id': 5692612, 'author_profile': 'https://Stackoverflow.com/users/5692612', 'pm_score': 1, 'selected': False, 'text': '<p>Fixed. Just need to add above real input field</p>\n\n<p><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion</a> - MDN\n<a href="https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908" rel="nofollow noreferrer">https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908</a> - medium\n                                        tested on EDGE, Chrome(latest v63), Firefox Quantum (57.0.4 64-бит), Firefox(52.2.0)\n                                        fake fields are a workaround for chrome/opera autofill getting the wrong fields</p>\n\n<pre><code> const fakeInputStyle = {opacity: 0, float: \'left\', border: \'none\', height: \'0\', width: \'0\'}\n\n &lt;input type="password" name=\'fake-password\' autoComplete=\'new-password\' tabIndex=\'-1\' style={fakeInputSyle} /&gt;\n\n&lt;TextField\n  name=\'userName\'\n  autoComplete=\'nope\'\n  ... \n/&gt;\n\n&lt;TextField\n      name=\'password\'\n      autoComplete=\'new-password\'\n      ... \n    /&gt;\n</code></pre>\n'}, {'answer_id': 49079410, 'author': 'Codemaker', 'author_id': 7103882, 'author_profile': 'https://Stackoverflow.com/users/7103882', 'pm_score': 2, 'selected': False, 'text': '<p>You can use autocomplete = off in input controls to avoid auto completion</p>\n\n<p>For example:</p>\n\n<pre><code>&lt;input type=text name="test" autocomplete="off" /&gt;\n</code></pre>\n\n<p>if the above code doesn\'t works then try to add those attributes also</p>\n\n<pre><code>autocapitalize="off" autocomplete="off"\n</code></pre>\n\n<p>or </p>\n\n<p>Change input type attribute to <code>type="search"</code>. Google doesn\'t apply auto-fill to inputs with a type of search.</p>\n'}, {'answer_id': 49376393, 'author': 'Cava', 'author_id': 3845972, 'author_profile': 'https://Stackoverflow.com/users/3845972', 'pm_score': 4, 'selected': False, 'text': '<p>The best solution:</p>\n\n<p>Prevent autocomplete username (or email) and password: </p>\n\n<pre class="lang-html prettyprint-override"><code>&lt;input type="email" name="email"&gt;&lt;!-- Can be type="text" --&gt;\n&lt;input type="password" name="password" autocomplete="new-password"&gt;\n</code></pre>\n\n<p>Prevent autocomplete a field:</p>\n\n<pre class="lang-html prettyprint-override"><code>&lt;input type="text" name="field" autocomplete="nope"&gt;\n</code></pre>\n\n<p>Explanation:\n<code>autocomplete</code> continues work in <code>&lt;input&gt;</code>, <code>autocomplete="off"</code> does not work, but you can change <code>off</code> to a random string, like <code>nope</code>.</p>\n\n<p>Works in:</p>\n\n<ul>\n<li><p>Chrome: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 and 64</p></li>\n<li><p>Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 and 58</p></li>\n</ul>\n'}, {'answer_id': 49491092, 'author': 'Edison Augusthy', 'author_id': 6781625, 'author_profile': 'https://Stackoverflow.com/users/6781625', 'pm_score': 2, 'selected': False, 'text': "<p>My solution is Change the text inputs type dynamically using angular js directive\nand it works like charm</p>\n<p>first add 2 hidden text fields</p>\n<p>and just add a angular directive like this</p>\n<pre><code> (function () {\n\n    'use strict';\n\n    appname.directive('changePasswordType', directive);\n\n    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];\n\n    function directive($timeout,  $rootScope, $cookies) {\n        var directive = {\n            link: link,\n            restrict: 'A'\n        };\n\n        return directive;\n\n        function link(scope,element) {\n            var process = function () {\n                var elem =element[0];\n                elem.value.length &gt; 0 ? element[0].setAttribute(&quot;type&quot;, &quot;password&quot;) :\n                element[0].setAttribute(&quot;type&quot;, &quot;text&quot;);\n            }\n\n            element.bind('input', function () {\n                process();\n            });\n\n            element.bind('keyup', function () {\n                process();\n            });\n        }\n    }\n})()\n</code></pre>\n<p>then use it in your text field where you need to prevent auto complete</p>\n<pre><code>    &lt;input type=&quot;text&quot; style=&quot;display:none&quot;&gt;\\\\can avoid this 2 lines\n    &lt;input type=&quot;password&quot; style=&quot;display:none&quot;&gt;\n    &lt;input type=&quot;text&quot;  autocomplete=&quot;new-password&quot; change-password-type&gt;\n</code></pre>\n<p>NB: dont forget to include jquery, and set <code>type =&quot;text&quot;</code> initially</p>\n"}, {'answer_id': 49810693, 'author': 'Julius Žaromskis', 'author_id': 5547034, 'author_profile': 'https://Stackoverflow.com/users/5547034', 'pm_score': 3, 'selected': False, 'text': '<p><strong>No fake inputs, no javascript!</strong></p>\n\n<p>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:</p>\n\n<pre><code>&lt;style type="text/css"&gt;\n    @font-face {\n        font-family: \'PasswordDots\';\n        src: url(\'text-security-disc.woff\') format(\'woff\');\n        font-weight: normal;\n        font-style: normal;\n    }\n\n    input.password {\n        font-family: \'PasswordDots\' !important;\n        font-size: 8px !important;\n    }\n&lt;/style&gt;\n\n&lt;input class="password" type="text" spellcheck="false" /&gt;\n</code></pre>\n\n<p>Download: <a href="https://github.com/noppa/text-security/blob/master/dist/text-security-disc.woff" rel="noreferrer">text-security-disc.woff</a></p>\n\n<p>Here\'s how my final result looks like:</p>\n\n<p><a href="https://i.stack.imgur.com/DQgcq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DQgcq.png" alt="Password Mask"></a></p>\n\n<p>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.</p>\n'}, {'answer_id': 50242926, 'author': 'user3014373', 'author_id': 3014373, 'author_profile': 'https://Stackoverflow.com/users/3014373', 'pm_score': 1, 'selected': False, 'text': '<p>I was able to stop Chrome 66 from autofilling by adding two fake inputs and giving them position absolute:</p>\n\n<pre><code>&lt;form style="position: relative"&gt;\n  &lt;div style="position: absolute; top: -999px; left: -999px;"&gt;\n    &lt;input name="username" type="text" /&gt;\n    &lt;input name="password" type="password" /&gt;\n  &lt;/div&gt;\n  &lt;input name="username" type="text" /&gt;\n  &lt;input name="password" type="password" /&gt;\n</code></pre>\n\n<p></p>\n\n<p>At first, I tried adding <code>display:none;</code> to the inputs but Chrome ignored them and autofilled the visible ones.</p>\n'}, {'answer_id': 50293264, 'author': 'gem007bd', 'author_id': 1852392, 'author_profile': 'https://Stackoverflow.com/users/1852392', 'pm_score': 2, 'selected': False, 'text': '<p>To solve this problem, I have used some CSS tricks and the following works for me. </p>\n\n<pre class="lang-css prettyprint-override"><code>input {\n    text-security:disc;\n    -webkit-text-security:disc;\n    -mox-text-security:disc;\n}\n</code></pre>\n\n<p>Please read <a href="https://medium.com/@idanhareven/how-to-workaround-browsers-save-password-password-autocomplete-features-135b91ad06d2" rel="noreferrer">this</a> article for further detail.</p>\n'}, {'answer_id': 50981688, 'author': 'joeytwiddle', 'author_id': 99777, 'author_profile': 'https://Stackoverflow.com/users/99777', 'pm_score': 3, 'selected': False, 'text': '<p>Google Chrome ignores the <code>autocomplete="off"</code> attribute for certain inputs, including password inputs and common inputs detected by name.</p>\n\n<p>For example, if you have an input with name <code>address</code>, then Chrome will provide autofill suggestions from addresses entered on other sites, <em>even if you tell it not to</em>:</p>\n\n<pre><code>&lt;input type="string" name="address" autocomplete="off"&gt;\n</code></pre>\n\n<p>If you don\'t want Chrome to do that, then you can rename or namespace the form field\'s name:</p>\n\n<pre><code>&lt;input type="string" name="mysite_addr" autocomplete="off"&gt;\n</code></pre>\n\n<p>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.</p>\n\n<pre><code>&lt;input type="string" name="mysite_addr" autocomplete="on"&gt;\n</code></pre>\n'}, {'answer_id': 51225857, 'author': 'NOYB', 'author_id': 5145161, 'author_profile': 'https://Stackoverflow.com/users/5145161', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n\n<pre><code>&lt;form&gt;\n  &lt;input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" /&gt;\n  &lt;input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" /&gt;\n  &lt;!-- Place the form elements below here. --&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>It is important that a text field precede the password field.  Otherwise the auto fill may not be prevented in some cases.  </p>\n\n<p>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.  </p>\n\n<p>It is important that these two fields are before the "real" password type field(s) in the form.</p>\n\n<p>For newer browsers that are html 5.3 compliant the autocomplete attribute value "new-password" should work.</p>\n\n<pre><code>&lt;form&gt;\n  &lt;input type="text" name="username" value="" /&gt;\n  &lt;input type="password" name="password" value="" autocomplete="new-password" /&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>A combination of the two methods can be used to support both older and newer browsers.</p>\n\n<pre><code>&lt;form&gt;\n  &lt;div style="display:none"&gt;\n    &lt;input type="text" readonly tabindex="-1" /&gt;\n    &lt;input type="password" readonly tabindex="-1" /&gt;\n  &lt;/div&gt;\n  &lt;!-- Place the form elements below here. --&gt;\n  &lt;input type="text" name="username" value="" /&gt;\n  &lt;input type="password" name="password" value="" autocomplete="new-password" /&gt;\n&lt;/form&gt;\n</code></pre>\n'}, {'answer_id': 51686510, 'author': 'step', 'author_id': 5320902, 'author_profile': 'https://Stackoverflow.com/users/5320902', 'pm_score': 6, 'selected': False, 'text': "<h2>Always working solution</h2>\n<p>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.</p>\n<pre><code>&lt;input name=&quot;name&quot; type=&quot;text&quot; autocomplete=&quot;rutjfkde&quot;&gt;\n</code></pre>\n<p>Hope that it will help to other people.</p>\n<p><strong>Update 2022:</strong></p>\n<p>Chrome made this improvement: <code>autocomplete=&quot;new-password&quot;</code> which will solve it but I am not sure, if Chrome change it again to different functionality after some time.</p>\n"}, {'answer_id': 53421696, 'author': 'JoerT', 'author_id': 2614920, 'author_profile': 'https://Stackoverflow.com/users/2614920', 'pm_score': 2, 'selected': False, 'text': '<p>If you want to prevent the common browser plug-in <code>LastPass</code> from auto-filling a field as well, you can add the attribute <code>data-lpignore="true"</code> added to the other suggestions on this thread. Note that this doesn\'t only apply to password fields. </p>\n\n<pre><code>&lt;input type="text" autocomplete="false" data-lpignore="true" /&gt;\n</code></pre>\n\n<p>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 <code>LastPass</code>.</p>\n'}, {'answer_id': 53810055, 'author': 'zapping', 'author_id': 234405, 'author_profile': 'https://Stackoverflow.com/users/234405', 'pm_score': 1, 'selected': False, 'text': '<p>This worked for me like a charm.</p>\n\n<ol>\n<li>Set the autocomplete attribute of the form to off</li>\n<li>Add a dummy input field and set its attribute also to off.</li>\n</ol>\n\n<blockquote>\n<pre><code>&lt;form autocomplete="off"&gt;\n &lt;input type="text" autocomplete="off" style="display:none"&gt;\n&lt;/form&gt;\n</code></pre>\n</blockquote>\n'}, {'answer_id': 54774273, 'author': 'Alan M.', 'author_id': 199374, 'author_profile': 'https://Stackoverflow.com/users/199374', 'pm_score': 2, 'selected': False, 'text': '<p>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...</p>\n<pre class="lang-html prettyprint-override"><code>&lt;input id=\'input_password\' type=\'text\' autocomplete=\'off\' autofocus&gt;\n</code></pre>\n<p>There\'s a variable named &quot;input&quot;, set to be an empty string...</p>\n<pre class="lang-javascript prettyprint-override"><code>var input = &quot;&quot;;\n</code></pre>\n<p>The field events are monitored by jQuery...</p>\n<ol>\n<li>On focus, the field content and the associated &quot;input&quot; variable are always cleared.</li>\n<li>On keypress, any alphanumeric character, as well as some defined symbols, are appended to the &quot;input&quot; variable, and the field input is replaced with a bullet character. Additionally, when the <kbd>Enter</kbd> key is pressed, and the typed characters (stored in the &quot;input&quot; variable) are sent to the server via Ajax. (See &quot;Server Details&quot; below.)</li>\n<li>On keyup, the <kbd>Home</kbd>, <kbd>End</kbd>, and <kbd>Arrow</kbd> keys cause the &quot;input&quot; variable and field values to be flushed. (I could have gotten fancy with arrow navigation and the focus event, and used <em>.selectionStart</em> 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 <kbd>Backspace</kbd> key truncates both the variable and field content accordingly.</li>\n</ol>\n<hr />\n<pre class="lang-javascript prettyprint-override"><code>$(&quot;#input_password&quot;).off().on(&quot;focus&quot;, function(event) {\n    $(this).val(&quot;&quot;);\n    input = &quot;&quot;;\n\n}).on(&quot;keypress&quot;, function(event) {\n    event.preventDefault();\n\n    if (event.key !== &quot;Enter&quot; &amp;&amp; event.key.match(/^[0-9a-z!@#\\$%&amp;*-_]/)) {\n        $(this).val( $(this).val() + &quot;•&quot; );\n        input += event.key;\n    }\n    else if (event.key == &quot;Enter&quot;) {\n        var params = {};\n        params.password = input;\n\n        $.post(SERVER_URL, params, function(data, status, ajax) {\n            location.reload();\n        });\n    }\n\n}).on(&quot;keyup&quot;, function(event) {\n    var navigationKeys = [&quot;Home&quot;, &quot;End&quot;, &quot;ArrowLeft&quot;, &quot;ArrowRight&quot;, &quot;ArrowUp&quot;, &quot;ArrowDown&quot;];\n    if ($.inArray(event.key, navigationKeys) &gt; -1) {\n        event.preventDefault();\n        $(this).val(&quot;&quot;);\n        input = &quot;&quot;;\n    }\n    else if (event.key == &quot;Backspace&quot;) {\n        var length = $(this).val().length - 1 &gt; 0 ? $(this).val().length : 0;\n        input = input.substring(0, length);\n    }\n});\n</code></pre>\n<hr />\n<p><strong>Front-End Summary</strong></p>\n<p>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.</p>\n<hr />\n<p><strong>Server Details</strong> (optional reading)</p>\n<p>As shown above, JavaScript executes <em>location.reload()</em> 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:</p>\n<ul>\n<li>When a user navigates to the site, the server looks for a legitimate cookie.</li>\n<li>If there isn\'t any cookie, the logon page is presented. When the user\nenters a password and it is sent via Ajax, the server confirms the password and also checks\nto see if the user\'s IP address is in an Authorized IP address list.</li>\n<li>If either the password or IP address are not recognized, the server doesn\'t generate a cookie, so when the page reloads, the user sees the same logon page.</li>\n<li>If both the password and IP address are recognized, the server generates a\ncookie that has a ten-minute life span, and it also stores two scrambled values that correspond with the time-frame and IP address.</li>\n<li>When the page reloads, the server finds the cookie and verifies that\nthe scrambled values are correct (i.e., that the time-frame corresponds with the cookie\'s date and that the IP address is the same).</li>\n<li>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.</li>\n<li>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.</li>\n<li>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\nredisplayed.</li>\n</ul>\n'}, {'answer_id': 55762165, 'author': 'ladone', 'author_id': 6396541, 'author_profile': 'https://Stackoverflow.com/users/6396541', 'pm_score': 0, 'selected': False, 'text': "<p>You can add a name in attribute <code>name</code> how <code>email</code> address to your form and generate an email value. For example:</p>\n<pre><code>&lt;form id=&quot;something-form&quot;&gt;\n  &lt;input style=&quot;display: none&quot; name=&quot;email&quot; value=&quot;randomgeneratevalue&quot;&gt;&lt;/input&gt;\n  &lt;input type=&quot;password&quot;&gt;\n&lt;/form&gt;\n</code></pre>\n<p>If you use this method, Google Chrome can't insert an autofill password.</p>\n"}, {'answer_id': 57001445, 'author': 'Pasham Akhil Kumar Reddy', 'author_id': 9811422, 'author_profile': 'https://Stackoverflow.com/users/9811422', 'pm_score': 2, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;form autocomplete="off"&gt;\n    &lt;input type="text" autocomplete="new-password" /&gt;\n    &lt;input type="password" autocomplete="new-password" /&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>I set autofill="off" on the form tag and autofill="new-password" wherever the autofill was not necessary.</p>\n'}, {'answer_id': 57086419, 'author': 'Kishan Vaghela', 'author_id': 3758898, 'author_profile': 'https://Stackoverflow.com/users/3758898', 'pm_score': 2, 'selected': False, 'text': '<h3 id="easy-hack-cq6b">Easy Hack</h3>\n<p>Make input read-only</p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;name&quot; readonly=&quot;readonly&quot;&gt;\n</code></pre>\n<p>Remove read-only after timeout</p>\n<pre><code>$(function() {\n    setTimeout(function() {\n        $(\'input[name=&quot;name&quot;]\').prop(\'readonly\', false);\n    }, 50);\n});\n</code></pre>\n'}, {'answer_id': 57112027, 'author': 'Lucas', 'author_id': 10269663, 'author_profile': 'https://Stackoverflow.com/users/10269663', 'pm_score': 2, 'selected': False, 'text': '<p>Unfortunately, this option was removed in most browsers, so it is not possible to disable the password hint.</p>\n<p>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.</p>\n'}, {'answer_id': 57316325, 'author': 'Marcelo Agimóvel', 'author_id': 7259765, 'author_profile': 'https://Stackoverflow.com/users/7259765', 'pm_score': 1, 'selected': False, 'text': "<p>I'v solved putting this code after page load:</p>\n\n<pre><code>&lt;script&gt;\nvar randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);\n  $('input[type=text]').attr('autocomplete',randomicAtomic);\n&lt;/script&gt;\n</code></pre>\n"}, {'answer_id': 57872318, 'author': 'João Victor Scanagatta', 'author_id': 9575870, 'author_profile': 'https://Stackoverflow.com/users/9575870', 'pm_score': 2, 'selected': False, 'text': '<p>I went through the same problem, today 09/10/2019 only solution I found was this</p>\n\n<p>Add autocomplete="off" into the form tag.</p>\n\n<p>put 1 false inputs after opening form tag.</p>\n\n<pre><code>&lt;input id="username" style="display:none" type="text" name="fakeusernameremembered"&gt;\n</code></pre>\n\n<p>but it won\'t work on password type field, try</p>\n\n<pre><code>&lt;input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required&gt;\n</code></pre>\n\n<p>on script</p>\n\n<pre><code>function turnOnPasswordStyle() {\n    $(\'#password\').attr(\'type\', "password");\n}\n</code></pre>\n\n<p>This is tested on Chrome-78, IE-44, Firefox-69</p>\n'}, {'answer_id': 58133198, 'author': 'azizsagi', 'author_id': 6060508, 'author_profile': 'https://Stackoverflow.com/users/6060508', 'pm_score': 1, 'selected': False, 'text': '<p>The simplest answer is</p>\n\n<p><code>&lt;input autocomplete="on|off"&gt;</code></p>\n\n<p>But keep in mind the browser support. Currently, autocomplete attribute is supported by </p>\n\n<p>Chrome  17.0 &amp; latest\nIE      5.0 &amp; latest<br>\nFirefox 4.0 &amp; latest<br>\nSafari  5.2 &amp; latest<br>\nOpera   9.6 &amp; latest</p>\n'}, {'answer_id': 59088192, 'author': 'xixe', 'author_id': 8601222, 'author_profile': 'https://Stackoverflow.com/users/8601222', 'pm_score': 1, 'selected': False, 'text': '<p>My solution with jQuery.\nIt may not be 100% reliable, but it works for me.\nThe idea is described in code annotations.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>    /**\r\n * Prevent fields autofill for fields.\r\n * 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]"),\r\n * the browser does not find this type of autocomplete in the saved values and does not offer options.\r\n * 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.\r\n * @type {{init: *}}\r\n */\r\nvar PreventFieldsAutofill = (function () {\r\n    function init () {\r\n        events.onPageStart();\r\n    }\r\n\r\n    var events = {\r\n        onPageStart: function () {\r\n            $(document).on(\'focus\', \'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]\', function () {\r\n                methods.replaceAttrs($(this));\r\n            });\r\n            $(document).on(\'blur\', \'input[data-prev-autocomplete]\', function () {\r\n                methods.returnAttrs($(this));\r\n            });\r\n            $(document).on(\'keydown\', \'input[data-prev-autocomplete]\', function (event) {\r\n                if (event.keyCode == 13 || event.which == 13) {\r\n                    methods.returnAttrs($(this));\r\n                }\r\n            });\r\n            $(document).on(\'submit\', \'form\', function () {\r\n                $(this).find(\'input[data-prev-autocomplete]\').each(function () {\r\n                    methods.returnAttrs($(this));\r\n                });\r\n            });\r\n        }\r\n    };\r\n\r\n    var methods = {\r\n        /**\r\n         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes\r\n         * @param $input\r\n         */\r\n        replaceAttrs: function ($input) {\r\n            var randomString = \'off-forced-\' + Date.now();\r\n            $input.attr(\'data-prev-autocomplete\', $input.attr(\'autocomplete\'));\r\n            $input.attr(\'autocomplete\', randomString);\r\n            if ($input.attr(\'name\')) {\r\n                $input.attr(\'data-prev-name\', $input.attr(\'name\'));\r\n                $input.attr(\'name\', randomString);\r\n            }\r\n        },\r\n        /**\r\n         * Restore original autocomplete and name value for prevent saving text in browser for unique value\r\n         * @param $input\r\n         */\r\n        returnAttrs: function ($input) {\r\n            $input.attr(\'autocomplete\', $input.attr(\'data-prev-autocomplete\'));\r\n            $input.removeAttr(\'data-prev-autocomplete\');\r\n            if ($input.attr(\'data-prev-name\')) {\r\n                $input.attr(\'name\', $input.attr(\'data-prev-name\'));\r\n                $input.removeAttr(\'data-prev-name\');\r\n            }\r\n        }\r\n    };\r\n\r\n    return {\r\n        init: init\r\n    }\r\n})();\r\nPreventFieldsAutofill.init();</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.input {\r\n  display: block;\r\n  width: 90%;\r\n  padding: 6px 12px;\r\n  font-size: 14px;\r\n  line-height: 1.42857143;\r\n  color: #555555;\r\n  background-color: #fff;\r\n  background-image: none;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"&gt;&lt;/script&gt;\r\n&lt;form action="#"&gt;\r\n  &lt;p&gt;\r\n    &lt;label for="input-1"&gt;Firts name without autocomplete&lt;/label&gt;&lt;br /&gt;\r\n    &lt;input id="input-1" class="input" type="text" name="first-name" autocomplete="off" placeholder="Firts name without autocomplete" /&gt;\r\n  &lt;/p&gt;\r\n  &lt;p&gt;\r\n    &lt;label for="input-2"&gt;Firts name with autocomplete&lt;/label&gt;&lt;br /&gt;\r\n    &lt;input id="input-2" class="input" type="text" name="first-name" autocomplete="given-name" placeholder="Firts name with autocomplete" /&gt;\r\n  &lt;/p&gt;\r\n  &lt;p&gt;\r\n    &lt;button type="submit"&gt;Submit form&lt;/button&gt;\r\n  &lt;/p&gt;\r\n&lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 59116692, 'author': 'Sikandar Amla', 'author_id': 2335620, 'author_profile': 'https://Stackoverflow.com/users/2335620', 'pm_score': 2, 'selected': False, 'text': '<p>I tried almost all the answers, but the new version of Chrome is smart; if you write</p>\n<pre><code>autocomplete=&quot;randomstring&quot; or autocomplete=&quot;rutjfkde&quot;\n</code></pre>\n<p>it automatically converts it to</p>\n<pre><code>autocomplete=&quot;off&quot;\n</code></pre>\n<p>when the input control receives the focus.</p>\n<p>So, I did it using jQuery, and my solution is as follows.</p>\n<pre><code>$(&quot;input[type=text], input[type=number], input[type=email], input[type=password]&quot;).focus(function (e) {\n    $(this).attr(&quot;autocomplete&quot;, &quot;new-password&quot;);\n})\n</code></pre>\n<p>This is the easiest and will do the trick for any number of controls you have on the form.</p>\n'}, {'answer_id': 59284463, 'author': 'Azaz ul Haq', 'author_id': 1091166, 'author_profile': 'https://Stackoverflow.com/users/1091166', 'pm_score': 2, 'selected': False, 'text': '<p>As of Dec 2019:</p>\n\n<p>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.</p>\n\n<p>So here is the solution I found, and I believe it\'s not yet discussed or mentioned in this post. </p>\n\n<p>According to Mozilla Dev Network(MDN) post about <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">how to turn off form autocomplete</a></p>\n\n<blockquote>\n  <p>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)</p>\n</blockquote>\n\n<p>On same article they discussed the usage of <code>autocmplete</code> property and its limitation. As we know, not all browsers honor this attribute as we desire.</p>\n\n<p><strong>Solution</strong></p>\n\n<p>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.\nHere is the <a href="https://terrylinooo.github.io/jquery.disableAutoFill/" rel="nofollow noreferrer">link</a> to jQuery plugin and how it works.</p>\n\n<p>Code snippet:</p>\n\n<pre><code>$(document).ready(function () {        \n    $(\'#frmLogin\').disableAutoFill({\n        passwordField: \'.password\'\n    });\n});\n</code></pre>\n\n<p>Point to notice in HTML is that password field is of type text and <code>password</code> class is applied to identify that field:</p>\n\n<pre><code>&lt;input id="Password" name="Password" type="text" class="form-control password"&gt;\n</code></pre>\n\n<p>Hope this would help someone.</p>\n'}, {'answer_id': 59787867, 'author': 'Nagnath Mungade', 'author_id': 5987450, 'author_profile': 'https://Stackoverflow.com/users/5987450', 'pm_score': 1, 'selected': False, 'text': '<p>Simply try to put attribute  autocomplete with value "off" to input type. </p>\n\n<pre><code>&lt;input type="password" autocomplete="off" name="password" id="password" /&gt;\n</code></pre>\n'}, {'answer_id': 60507431, 'author': 'Jos', 'author_id': 1314824, 'author_profile': 'https://Stackoverflow.com/users/1314824', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n<p>An example in <a href="https://en.wikipedia.org/wiki/React_(web_framework)" rel="nofollow noreferrer">React</a>:</p>\n<pre><code>import React, {Component} from \'react\';\n\nclass NoAutoFillInput extends Component{\n\n    constructor() {\n        super();\n        this.state = {\n            locked: true\n        }\n    }\n\n    onChange(event){\n        if (!this.state.locked){\n            this.props.onChange(event.target.value);\n        }\n    }\n\n    render() {\n        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () =&gt; this.setState({locked: false})}};\n        return &lt;input {...props}/&gt;;\n    }\n}\n\nexport default NoAutoFillInput;\n</code></pre>\n<p>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:</p>\n<pre><code>&lt;div className=&quot;form-group row&quot;&gt;\n    &lt;div className=&quot;col-sm-2&quot;&gt;\n        &lt;NoAutoFillInput type=&quot;text&quot; name=&quot;myUserName&quot; className=&quot;form-control&quot; placeholder=&quot;Username&quot; value={this.state.userName} onChange={value =&gt; this.setState({userName: value})}/&gt;\n    &lt;/div&gt;\n    &lt;div className=&quot;col-sm-2&quot;&gt;\n        &lt;NoAutoFillInput type=&quot;password&quot; name=&quot;myPassword&quot; className=&quot;form-control&quot; placeholder=&quot;Password&quot; value={this.state.password} onChange={value =&gt; this.setState({password: value})}/&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Of course, this idea could be used with other JavaScript frameworks as well.</p>\n'}, {'answer_id': 61104423, 'author': 'Patrick', 'author_id': 10010196, 'author_profile': 'https://Stackoverflow.com/users/10010196', 'pm_score': 2, 'selected': False, 'text': "<p>None of the solutions I've found at this day bring a real working response.</p>\n<p>Solutions with an <code>autocomplete</code> attribute do not work.</p>\n<p>So, this is what I wrote for myself:</p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;UserName&quot; onkeyup=&quot;if (this.value.length &gt; 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');&quot; &gt;\n</code></pre>\n<p>You should do this for every input field you want as a password type on your page.</p>\n<p>And this works.</p>\n<p>cheers</p>\n"}, {'answer_id': 62593263, 'author': 'prabhat.mishra2812', 'author_id': 2017472, 'author_profile': 'https://Stackoverflow.com/users/2017472', 'pm_score': 0, 'selected': False, 'text': '\n<p>Just <code>autocomplete=&quot;off&quot; list=&quot;autocompleteOff&quot;</code> in your input and work done for IE/Edge! and for chrome add <code>autocomplete=&quot;new password&quot;</code></p>\n'}, {'answer_id': 62808993, 'author': 'Nerve', 'author_id': 1541507, 'author_profile': 'https://Stackoverflow.com/users/1541507', 'pm_score': 2, 'selected': False, 'text': '<p>There are many answers but most of them are hacks or some kind of workaround.</p>\n<p>There are three cases here.</p>\n<p><strong>Case I:</strong> 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.</p>\n<p>In case you still want to do it, see <strong>Case III</strong></p>\n<p><strong>Case II:</strong> When this is not your regular login form but <code>name</code> or <code>id</code> attribute of inputs is not &quot;like&quot; email, login, username, user_name, password.</p>\n<p>Use</p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;yoda&quot; autocomplete=&quot;off&quot;&gt;\n</code></pre>\n<p><strong>Case III:</strong> When this is not your regular login form but <code>name</code> or <code>id</code> attribute of inputs is &quot;like&quot; email, login, username, user_name, password.</p>\n<p>For example:\nlogin, abc_login, password, some_password, password_field.</p>\n<p>All browsers come with password management features offering to remember them OR suggesting stronger passwords. That\'s how they do it.</p>\n<p>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.</p>\n<p>In such cases, <code>autocomplete=&quot;off&quot;</code> will not work. Use <code>autocomplete=&quot;new-password&quot;</code></p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;yoda&quot; autocomplete=&quot;new-password&quot;&gt;\n</code></pre>\n<p><strong>Helpful Link:</strong></p>\n<ol>\n<li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion</a></li>\n</ol>\n'}, {'answer_id': 62904153, 'author': 'Adrian P.', 'author_id': 1058605, 'author_profile': 'https://Stackoverflow.com/users/1058605', 'pm_score': 0, 'selected': False, 'text': "<p>I was fighting to autocomplete for years. I've tried every single suggestion, and nothing worked for me.\nAdding by jQuery 2 attributes worked well:</p>\n<pre><code>$(document).ready( function () {\n    setTimeout(function() {\n        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');\n    }, 10);\n}); \n</code></pre>\n<p>will result in HTML</p>\n<pre><code>&lt;input id=&quot;start_date&quot; name=&quot;start_date&quot; type=&quot;text&quot; value=&quot;&quot; class=&quot;input-small hasDatepicker&quot; autocomplete=&quot;off&quot; placeholder=&quot;Start date&quot; autocorrect=&quot;off&quot;&gt;\n</code></pre>\n"}, {'answer_id': 63244443, 'author': 'Juergen', 'author_id': 2183431, 'author_profile': 'https://Stackoverflow.com/users/2183431', 'pm_score': 0, 'selected': False, 'text': "<p>This works with Chrome 84.0.4147.105</p>\n<p>1. Assign text type to password fields and add a class, e.g. &quot;fakepasswordtype&quot;</p>\n<pre><code>&lt;input type=&quot;text&quot; class=&quot;fakepasswordtype&quot; name=&quot;password1&quot;&gt;\n&lt;input type=&quot;text&quot; class=&quot;fakepasswordtype&quot; name=&quot;password2&quot;&gt;\n</code></pre>\n<p>2. Then use jQuery to change the type back to password the moment when first input is done</p>\n<pre><code>jQuery(document).ready(function($) {\n    $('.fakepasswordtype').on('input', function(e){\n        $(this).prop('type', 'password');\n    });\n});\n</code></pre>\n<p>This stopped Chrome from its nasty ugly behavior from auto filling.</p>\n"}, {'answer_id': 63330944, 'author': 'Shedrack', 'author_id': 12733154, 'author_profile': 'https://Stackoverflow.com/users/12733154', 'pm_score': 1, 'selected': False, 'text': "<pre><code>&lt;input type=&quot;text&quot; name=&quot;attendees&quot; id=&quot;autocomplete-custom-append&quot;&gt;\n\n&lt;script&gt;\n  /* AUTOCOMPLETE */\n\n  function init_autocomplete() {\n\n    if (typeof ($.fn.autocomplete) === 'undefined') {\n      return;\n    }\n    // console.log('init_autocomplete');\n\n    var attendees = {\n      1: &quot;Shedrack Godson&quot;,\n      2: &quot;Hellen Thobias Mgeni&quot;,\n      3: &quot;Gerald Sanga&quot;,\n      4: &quot;Tabitha Godson&quot;,\n      5: &quot;Neema Oscar Mracha&quot;\n    };\n\n    var countriesArray = $.map(countries, function (value, key) {\n      return {\n        value: value,\n        data: key\n      };\n    });\n\n    // initialize autocomplete with custom appendTo\n    $('#autocomplete-custom-append').autocomplete({\n      lookup: countriesArray\n    });\n\n  };\n&lt;/script&gt;\n</code></pre>\n"}, {'answer_id': 64499109, 'author': 'Adam Whateverson', 'author_id': 6730421, 'author_profile': 'https://Stackoverflow.com/users/6730421', 'pm_score': 2, 'selected': False, 'text': '<p><strong>Pretty sure this is the most generic solution as of today</strong></p>\n<p>This stops auto-complete and the popup suggestion box too.</p>\n<p><strong>Intro</strong></p>\n<p>Let\'s face it, autocomplete=off or new-password doesn\'t seem to work.\nIt\'s should do but it doesn\'t and every week we discover something else has changed and the browser is filling a form out with more random garbage we don\'t want.  I\'ve discovered a really simple solution that doesn\'t need autocomplete on sign in pages.</p>\n<p><strong>How to implement</strong></p>\n<p>Step 1). Add the same function call to the onmousedown and onkeyup attributes for your username and password fields, making sure you give them an id AND note the code at the end of the function call. md=mousedown and ku=keyup</p>\n<p>For the username field only add a value of <code>&amp;nbsp;</code> as this prevents the form auto-filling on entry to the page.</p>\n<p>For example:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" value="&amp;nbsp;" id="myusername" onmousedown="protectMe(this,\'md\')" onkeyup="protectMe(this,\'ku\')" /&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Step 2). Include this function on the page</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>function protectMe(el,action){\n\n // Remove the white space we injected on startup\n var v = el.value.trim();\n \n// Ignore this reset process if we are typing content in\n// and only acknowledge a keypress when it\'s the last Delete\n// we do resulting in the form value being empty\n if(action==\'ku\' &amp;&amp; v != \'\'){return;} \n\n// Fix double quote issue (in the form input) that results from writing the outerHTML back to itself\n  v = v.replace(/"/g,\'\\\\"\'); \n  \n  // Reset the popup appearing when the form came into focus from a click  by rewriting it back\n  el.outerHTML=el.outerHTML; \n\n  // Issue instruction to refocus it again, insert the value that existed before we reset it and then select the content.\n  setTimeout("var d=document.getElementById(\'"+el.id+"\'); d.value=\\""+v+"\\";d.focus();if(d.value.length&gt;1){d.select();}",100);\n}</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p><strong>What does it do?</strong></p>\n<ul>\n<li>Firstly it adds an <code>&amp;nbsp;</code> space to the field so the browser tries\nto find details related to that but doesn\'t find anything, so that\'s\nauto-complete fixed</li>\n<li>Secondly, when you click, the HTML is created again, cancelling out the popup and then the value is added back selected.</li>\n<li>Finally, when you delete the string with the Delete button the popup usually ends up appearing again but the keyup check repeats the process if we hit that point.</li>\n</ul>\n<p><strong>What are the issues?</strong></p>\n<ul>\n<li>Clicking to select a character is a problem but for a sign in page most will forgive the fact it select all the text</li>\n<li>Javascript does trim any inputs of blank spaces but you might want to do it too on the server side to be safe</li>\n</ul>\n<p><strong>Can it be better?</strong></p>\n<p>Yes probably. This is just something I tested and it satisfies my basic need but there might be more tricks to add or a better way to apply all of this.</p>\n<p><strong>Tested browsers</strong></p>\n<p>Tested and working on latest Chrome, Firefox, Edge as of this post date</p>\n'}, {'answer_id': 64616202, 'author': 'FrontEndDev', 'author_id': 6168762, 'author_profile': 'https://Stackoverflow.com/users/6168762', 'pm_score': 2, 'selected': False, 'text': '<p>I must have spent two days on this discussion before resorting to creating my own solution:</p>\n<p>First, if it works for the task, ditch the <code>input</code> and use a <code>textarea</code>. To my knowledge, autofill/autocomplete has no business in a <code>textarea</code>, which is a great start in terms of what we\'re trying to achieve. Now you just have to change some of the default behaviors of that element to make it act like an <code>input</code>.</p>\n<p>Next, you\'ll want to keep any long entries on the same line, like an <code>input</code>, and you\'ll want the <code>textarea</code> to scroll along the y-axis with the cursor. We also want to get rid of the resize box, since we\'re doing our best to mimic the behavior of an <code>input</code>, which doesn\'t come with a resize handle. We achieve all of this with some quick CSS:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#your-textarea {\n  resize: none;\n  overflow-y: hidden;\n  white-space: nowrap;\n}</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Finally, you\'ll want to make sure the pesky scrollbar doesn\'t arrive to wreck the party (for those particularly long entries), so make sure your text-area doesn\'t show it:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#your-textarea::-webkit-scrollbar {\n  display: none;\n}</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Easy peasy. We\'ve had zero autocomplete issues with this solution.</p>\n'}, {'answer_id': 64986232, 'author': 'A.D.P. Tondolo', 'author_id': 5846607, 'author_profile': 'https://Stackoverflow.com/users/5846607', 'pm_score': 1, 'selected': False, 'text': '<ol>\n<li>Leave inputs with text type and hidden.</li>\n<li>On DOMContentLoaded, call a function that changes the types for password and display the fields, with a delay of 1s.</li>\n</ol>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener(\'DOMContentLoaded\', changeInputsType);\n\nfunction changeInputsType() {\n    setTimeout(function() {\n        $(/*selector*/).prop("type", "password").show();\n    }, 1000);\n}</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 65305870, 'author': 'Elazar Zadiki', 'author_id': 3376480, 'author_profile': 'https://Stackoverflow.com/users/3376480', 'pm_score': 1, 'selected': False, 'text': "<p>After trying all solutions (some have worked partly, disabling autofill but not autocomplete, some did not work at all), I've found the best solution as of 2020 to be adding type=&quot;search&quot; and autocomplete=&quot;off&quot; to your input element. Like this:</p>\n<pre><code>&lt;input type=&quot;search&quot; /&gt; or &lt;input type=&quot;search&quot; autocomplete=&quot;off&quot; /&gt;\n</code></pre>\n<p>Also make sure to have autocomplete=&quot;off&quot; on the form element.\nThis works perfectly and disables both autocomplete and autofill.</p>\n<p>Also, if you're using type=&quot;email&quot; or any other text type, you'll need to add autocomplete=&quot;new-email&quot; and that will disable both perfectly. same goes for type=&quot;password&quot;. Just add a &quot;new-&quot; prefix to the autocomplete together with the type.\nLike this:</p>\n<pre><code>&lt;input type=&quot;email&quot; autocomplete=&quot;new-email&quot; /&gt;\n&lt;input type=&quot;password&quot; autocomplete=&quot;new-password&quot; /&gt;\n</code></pre>\n"}, {'answer_id': 65484970, 'author': 'Guido', 'author_id': 5117084, 'author_profile': 'https://Stackoverflow.com/users/5117084', 'pm_score': 1, 'selected': False, 'text': '<p>I already posted a solution for this here: <em><a href="https://stackoverflow.com/questions/37595141/disable-chrome-autofill-creditcard/60664102#60664102">Disable Chrome Autofill creditcard</a></em></p>\n<p>The workaround is to set the autocomplete attribute as &quot;cc-csc&quot; that value is the <a href="https://en.wikipedia.org/wiki/Card_security_code" rel="nofollow noreferrer">CSC</a> of a credit card and that they are no allowed to store it! (for now...)</p>\n<pre><code>autocomplete=&quot;cc-csc&quot;\n</code></pre>\n'}, {'answer_id': 67016956, 'author': 'thisisashwani', 'author_id': 3663437, 'author_profile': 'https://Stackoverflow.com/users/3663437', 'pm_score': 2, 'selected': False, 'text': '<blockquote>\n<p>(It works in 2021 for Chrome (v88, 89, 90), Firefox, Brave, and Safari.)</p>\n<p>The old answers already written here will work with trial and error, but most of\nthem don\'t link to any official documentation or what Chrome has to say on this\nmatter.</p>\n</blockquote>\n<p>The issue mentioned in the question is because of Chrome\'s autofill feature, and here is Chrome\'s stance on it in this bug link - <em><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164" rel="nofollow noreferrer">Issue 468153: autocomplete=off is ignored on non-login INPUT elements, Comment 160</a></em></p>\n<p>To put it simply, there are two cases -</p>\n<ul>\n<li><p><em><strong>[CASE 1]</strong></em>: Your <code>input</code> type is something other than <code>password</code>. In this case, the solution is simple, and has three steps.</p>\n</li>\n<li><p>Add the <code>name</code> attribute to <code>input</code></p>\n</li>\n<li><p><code>name</code> should not start with a value like email or username. Otherwise Chrome still ends up showing the dropdown. For example, <code>name=&quot;emailToDelete&quot;</code> shows the dropdown, but <code>name=&quot;to-delete-email&quot;</code> doesn\'t. The same applies for the <code>autocomplete</code> attribute.</p>\n</li>\n<li><p>Add the <code>autocomplete</code> attribute, and add a value which is meaningful for you, like <code>new-field-name</code></p>\n</li>\n</ul>\n<p>It will look like this, and you won\'t see the autofill for this input again for the rest of your life -</p>\n<pre><code>  &lt;input type=&quot;text/number/something-other-than-password&quot; name=&quot;x-field-1&quot; autocomplete=&quot;new-field-1&quot; /&gt;\n</code></pre>\n<ul>\n<li><em><strong>[CASE 2]</strong></em>: <code>input</code> <code>type</code> is <code>password</code></li>\n<li>Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password. Firefox will also do something similar, and same will be the case with all other major browsers. <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">2</a></li>\n<li>In this case, if you really want to stop the user from seeing the dropdown to manage passwords / see a securely generated password, you will have to play around with JS to switch input type, as mentioned in the other answers of this question.</li>\n</ul>\n<p><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">2</a> Detailed MDN documentation on turning off autocompletion - <em><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" rel="nofollow noreferrer">How to turn off form autocompletion</a></em></p>\n'}, {'answer_id': 67308894, 'author': 'Stokely', 'author_id': 5555938, 'author_profile': 'https://Stackoverflow.com/users/5555938', 'pm_score': 1, 'selected': False, 'text': '<p><strong>Simply change the <code>name</code> attribute in your <code>input</code> element to something <em>unique</em> each time and it will never autocomplete again!</strong></p>\n<p>An example might be a time tic added at the end. Your server would only need to parse the first part of the text <code>name</code> to retrieve the value back.</p>\n<pre><code>&lt;input type=&quot;password&quot; name=&quot;password_{DateTime.Now.Ticks}&quot; value=&quot;&quot; /&gt;\n</code></pre>\n'}, {'answer_id': 67525598, 'author': 'jemiloii', 'author_id': 630496, 'author_profile': 'https://Stackoverflow.com/users/630496', 'pm_score': 0, 'selected': False, 'text': '<p>Chrome keeps trying to force autocomplete. So there are a few things you need to do.</p>\n<p>The input field\'s attributes <code>id</code> and <code>name</code> need to not be recognizable. So no values such as name, phone, address, etc.</p>\n<p>The adjacent label or div also needs to not be recognizable. However, you may wonder, how will the user know? Well there is a fun little trick you can do with <code>::after</code> using the <code>content</code>. You can set it to a letter.</p>\n<pre class="lang-html prettyprint-override"><code>&lt;label&gt;Ph&lt;span class=\'o\'&gt;&lt;/span&gt;ne&lt;/label&gt;\n&lt;input id=\'phnbr\' name=\'phnbr\' type=\'text\'&gt;\n\n&lt;style&gt;\n  span.o {\n    content: \'o\';\n  }\n&lt;/style&gt;\n</code></pre>\n'}, {'answer_id': 67612266, 'author': 'Rocket Fuel', 'author_id': 4263655, 'author_profile': 'https://Stackoverflow.com/users/4263655', 'pm_score': 3, 'selected': False, 'text': "<p>Here's the perfect solution that will work in all browsers as of May 2021!</p>\n<h1>TL;DR</h1>\n<p>Rename your input field names and field ids to something non-related like <code>'data_input_field_1'</code>. Then add the <code>&amp;#8204;</code> character into the middle of your labels. This is a non-printing character, so you won't see it, but it tricks the browser into not recognizing the field as one needing auto-completing, thus no built-in auto-complete widget is shown!</p>\n<h1>The Details</h1>\n<p>Almost all browsers use a combination of the field's name, id, placeholder, and label to determine if the field belongs to a group of address fields that could benefit from auto-completion. So if you have a field like <code>&lt;input type=&quot;text&quot; id=&quot;address&quot; name=&quot;street_address&quot;&gt;</code> pretty much all browsers will interpret the field as being an address field. As such the browser will display its built-in auto-completion widget. The dream would be that using the attribute <code>autocomplete=&quot;off&quot;</code> would work, unfortunately, most browsers nowadays don't obey the request.</p>\n<p>So we need to use some trickery to get the browsers to not display the built-in autocomplete widget. The way we will do that is by fooling the browser into believing that the field is not an address field at all.</p>\n<p>Start by renaming the <strong>id</strong> and the <strong>name</strong> attributes to something that won't give away that you're dealing with address-related data. So rather than using <code>&lt;input type=&quot;text&quot; id=&quot;city-input&quot; name=&quot;city&quot;&gt;</code>, use something like this instead <code>&lt;input type=&quot;text&quot; id=&quot;input-field-3&quot; name=&quot;data_input_field_3&quot;&gt;</code>. The browser doesn't know what data_input_field_3 represents. But you do.</p>\n<p>If possible, don't use <strong>placeholder text</strong> as most browsers will also take that into account. If you have to use placeholder text, then you'll have to get creative and make sure you're not using any words relating to the address parameter itself (like <code>City</code>). Using something like <code>Enter location</code> can do the trick.</p>\n<p>The final parameter is the <strong>label</strong> attached to the field. However, if you're like me, you probably want to keep the label intact and display recognizable fields to your users like &quot;Address&quot;, &quot;City&quot;, &quot;State&quot;, &quot;Country&quot;. Well, great news: <em><strong>you can</strong></em>! The best way to achieve that is to insert a <em>Zero-Width Non-Joiner Character</em>, <code>&amp;#8204;</code>, as the second character in the label. So replacing <code>&lt;label&gt;City&lt;/label&gt;</code> with <code>&lt;label&gt;C&amp;#8204;ity&lt;/label&gt;</code>. This is a non-printing character, so your users will see <code>City</code>, but the browser will be tricked into seeing <code>C ity</code> and not recognize the field!</p>\n<p>Mission accomplished! If all went well, the browser should not display the built-in address auto-completion widget on those fields anymore!</p>\n"}, {'answer_id': 68538472, 'author': 'German', 'author_id': 12883974, 'author_profile': 'https://Stackoverflow.com/users/12883974', 'pm_score': 3, 'selected': False, 'text': '<p>Things had changed now as I tried it myself old answers no longer work.</p>\n<p>Implementation that I\'m sure it will work. I test this in Chrome, Edge and Firefox and it does do the trick. You may also try this and tell us your experience.</p>\n<pre><code>set the autocomplete attribute of the password input element to &quot;new-password&quot;\n\n&lt;form autocomplete=&quot;off&quot;&gt;\n....other element\n&lt;input type=&quot;password&quot; autocomplete=&quot;new-password&quot;/&gt;\n&lt;/form&gt;\n</code></pre>\n<p>This is according to <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password" rel="noreferrer">MDN</a></p>\n<p>If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use <code>autocomplete=&quot;new-password&quot;</code></p>\n<p>This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling <code>&lt;input&gt;</code>  elements with autocomplete=&quot;new-password&quot; for this very reason.</p>\n'}, {'answer_id': 69547712, 'author': 'Stokely', 'author_id': 5555938, 'author_profile': 'https://Stackoverflow.com/users/5555938', 'pm_score': 0, 'selected': False, 'text': '<p><strong>DO NOT USE JAVASCRIPT to fix this!!</strong></p>\n<p>Use HTML to address this problem first, in case browsers are not using scripts, fail to use your version of script, or have scripts turned off. Always layer scripting LAST on top of HTML.</p>\n<ol>\n<li>For regular input form fields with &quot;text&quot; type attributes, add the <code>autocomplete=&quot;off&quot;</code> on the element. This may not work in modern HTML5 browsers due to user browser override settings but it takes care of many older browsers and stops the autocomplete drop down choices in most. Notice, I also include all the other autocomplete options that might be irritating to users, like <code>autocapitalize=&quot;off&quot;</code>, <code>autocorrect=&quot;off&quot;</code>, and <code>spellcheck=&quot;false&quot;</code>. Many browser do not support these but they add extra &quot;offs&quot; of features that annoy data entry people. Note that <strong>Chrome for example ignores &quot;off&quot;</strong> if a users browsers are set with <code>autofill</code> enabled. So, realize browser settings can override this attribute.</li>\n</ol>\n<p>EXAMPLE:</p>\n<pre><code>&lt;input type=&quot;text&quot; id=&quot;myfield&quot; name=&quot;myfield&quot; size=&quot;20&quot; value=&quot;&quot; autocomplete=&quot;off&quot; autocapitalize=&quot;off&quot; autocorrect=&quot;off&quot; spellcheck=&quot;false&quot; tabindex=&quot;0&quot; placeholder=&quot;Enter something here...&quot; title=&quot;Enter Something&quot; aria-label=&quot;Something&quot; required=&quot;required&quot; aria-required=&quot;true&quot; /&gt;\n</code></pre>\n<ol start="2">\n<li>For <em>username</em> and <em>password</em> input type fields, there are some limited browser support for more specific attributes for <code>autocomplete</code> that trigger the &quot;off&quot; feature&quot;. <code>autocomplete=&quot;username&quot;</code> on text inputs used for logins will force some browsers to reset and remove the autocomplete feature. <code>autocomplete=&quot;new-password&quot;</code> will try and do the same for passwords using the &quot;password&quot; type input field. (see below). However, these are propriety to specific browsers, and will fail in most. Browsers that do not support these features include Internet Explorer 1-11, many Safari and Opera desktop browsers, and some version of iPhone and Android default browsers. But they provide additional power to try and force removal of autocomplete.</li>\n</ol>\n<p>EXAMPLE:</p>\n<pre><code>&lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; size=&quot;20&quot; value=&quot;&quot; autocomplete=&quot;username&quot; autocapitalize=&quot;off&quot; autocorrect=&quot;off&quot; spellcheck=&quot;false&quot; tabindex=&quot;0&quot; placeholder=&quot;Enter username here...&quot; title=&quot;Enter Username&quot; aria-label=&quot;Username&quot; required=&quot;required&quot; aria-required=&quot;true&quot; /&gt;\n</code></pre>\n<pre><code>&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; size=&quot;20&quot; minlength=&quot;8&quot; maxlength=&quot;12&quot; pattern=&quot;(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}&quot; value=&quot;&quot; autocomplete=&quot;new-password&quot; autocapitalize=&quot;off&quot; autocorrect=&quot;off&quot; spellcheck=&quot;false&quot; tabindex=&quot;0&quot; placeholder=&quot;Enter password here...&quot; title=&quot;Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter&quot; aria-label=&quot;Password&quot; required=&quot;required&quot; aria-required=&quot;true&quot; /&gt;\n</code></pre>\n<p><strong>NOW FOR A BETTER SOLUTION!</strong></p>\n<p>Because of the splintered support for HTML5 by standards bodies and browsers, <strong>many of these modern HTML5 attributes fail in many browsers</strong>. So, some kids turn to scripting to fill in the holes. But that\'s lazy programming. Hiding or rewriting HTML using <strong>JavaScript makes things worse</strong>, as you now have layers upon layers of script dependencies <em>PLUS</em> the HTML patches. Avoid this!</p>\n<p><strong>The best way to permanently disable this feature in forms and fields is to simply create a custom &quot;id&quot;/&quot;name&quot; value</strong> each time on your \'input\' elements using a unique value like a date or time concatenated to the field id and name attribute and make sure they match (e.g. &quot;name=password_{date}&quot;).</p>\n<pre><code>&lt;input type=&quot;text&quot; id=&quot;password_20211013&quot; name=&quot;password_20211013&quot; /&gt;\n</code></pre>\n<p>This <em>destroys</em> the silly browser autocomplete choice algorithms sniffing for matched names that trigger past values for these fields. Doing so, the browsers cannot match caches of previous form data with yours. It will force &quot;autocomplete&quot; to be off, or show a blank list, and will not show any previous passwords ever again! On the server side, you can create these custom input &quot;named&quot; fields and can still identify and extract the right field from the response coming from the user\'s browser by simply parsing the first part of the id/name. For example &quot;password_&quot; or &quot;username_&quot;, etc. When the field\'s &quot;name&quot; value comes in you simply parse for the first part (&quot;password_{date}&quot;) and ignore the rest, then extract your value on the server.</p>\n<p>Easy!</p>\n'}, {'answer_id': 69733397, 'author': 'Shahid Malik', 'author_id': 6487625, 'author_profile': 'https://Stackoverflow.com/users/6487625', 'pm_score': 0, 'selected': False, 'text': '<p>Very simple solution Just change the label name and fields name other than the more generic name e.g: Name, Contact, Email.\nUse &quot;Mail To&quot; instead of &quot;Email&quot;.\nBrowsers ignore autocomplete off for these fields.</p>\n'}, {'answer_id': 69817877, 'author': 'Alex from Jitbit', 'author_id': 56621, 'author_profile': 'https://Stackoverflow.com/users/56621', 'pm_score': 1, 'selected': False, 'text': "<p>I've been fighting this never-ending battle for ages now... And all tricks and hacks eventually stop working, almost as if browser devs are reading this question.</p>\n<p>I didn't want to randomize field names, touch the server-side code, use JS-heavy tricks and wanted to keep &quot;hacks&quot; to a minimum. So here's what I came up with:</p>\n<p><strong>TL;DR</strong> use an <code>input</code> without a <code>name</code> or <code>id</code> at all! And track changes in a hidden field</p>\n<pre><code>&lt;!-- input without the &quot;name&quot; or &quot;id&quot; --&gt;\n&lt;input type=&quot;text&quot; oninput=&quot;this.nextElementSibling.value=this.value&quot;&gt;\n&lt;input type=&quot;hidden&quot; name=&quot;email&quot; id=&quot;email&quot;&gt;\n</code></pre>\n<p>Works in all major browsers, obviously.</p>\n<p>P.S. Known minor issues:</p>\n<ol>\n<li>you can't reference this field by <code>id</code> or <code>name</code> anymore. But you can use CSS classes. Or use <code>$(#email').prev();</code> in jQuery. Or come up with another solution (there's many).</li>\n<li><code>oninput</code> and <code>onchange</code> events do not fire when the textbox value is changed programmatically. So modify your code accordingly to mirror changes in the hidden field too.</li>\n</ol>\n"}, {'answer_id': 69977957, 'author': 'user1779049', 'author_id': 1779049, 'author_profile': 'https://Stackoverflow.com/users/1779049', 'pm_score': 0, 'selected': False, 'text': "<p>Define input's attribute type=&quot;text&quot; along with autocomplete=&quot;off&quot; works enough to turn off autocomplete for me.</p>\n<p>EXCEPT for type=&quot;password&quot;, I try switching the readonly attribute using JavaScript hooking on onfocus/onfocusout event from others' suggestions works fine BUT while the password field editing begin empty, autocomplete password comes again.</p>\n<p>I would suggest switching the type attribute regarding length of password using JavaScript hooking on oninput event in addition to above workaround which worked well..</p>\n<pre><code>&lt;input id=&quot;pwd1&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; oninput=&quot;sw(this)&quot; readonly onfocus=&quot;a(this)&quot; onfocusout=&quot;b(this)&quot; /&gt;\n&lt;input id=&quot;pwd2&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; oninput=&quot;sw(this)&quot; readonly onfocus=&quot;a(this)&quot; onfocusout=&quot;b(this)&quot; /&gt;\n</code></pre>\n<p>and JavaScript..</p>\n<pre><code>function sw(e) {\n    e.setAttribute('type', (e.value.length &gt; 0) ? 'password' : 'text');\n}\nfunction a(e) {\n    e.removeAttribute('readonly');\n}\nfunction b(e) {\n    e.setAttribute('readonly', 'readonly');\n}\n</code></pre>\n"}, {'answer_id': 70065375, 'author': 'Abdul Wadud Somrat', 'author_id': 8977722, 'author_profile': 'https://Stackoverflow.com/users/8977722', 'pm_score': 2, 'selected': False, 'text': "<p>To disable the autocomplete of text in forms, use the autocomplete attribute of  and  elements. You'll need the &quot;off&quot; value of this attribute.</p>\n<p>This can be done in a  for a complete form or for specific  elements:</p>\n<ol>\n<li>Add autocomplete=&quot;off&quot; onto the  element to disable autocomplete for the entire form.</li>\n<li>Add autocomplete=&quot;off&quot; for a specific  element of the form.</li>\n</ol>\n<p><strong>form</strong></p>\n<pre><code>&lt;form action=&quot;#&quot; method=&quot;GET&quot; autocomplete=&quot;off&quot;&gt;\n&lt;/form&gt;\n</code></pre>\n<p><strong>input</strong></p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;Name&quot; placeholder=&quot;First Name&quot; autocomplete=&quot;off&quot;&gt;\n</code></pre>\n"}, {'answer_id': 70182710, 'author': 'abernee', 'author_id': 5846231, 'author_profile': 'https://Stackoverflow.com/users/5846231', 'pm_score': -1, 'selected': False, 'text': "<p>I was having trouble on a form which included input fields for username and email with email being right after username.  Chrome would autofill my current username for the site into the email field and put focus on that field.  This wasn't ideal as it was a form for adding new users to the web application.</p>\n<p>It seems that if you have two inputs one after the other where the first one has the term 'user name' or username in it's label or ID and the next one has the word email in it's label or ID chrome will autofill the email field.</p>\n<p>What solved the issue for me was to change the ID's of the inputs to not include those words.  I also had to set the text of the labels\nto an empty string and use a javascript settimeout function to change the label back to what it should be after 0.01s.</p>\n<pre><code>setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);\n</code></pre>\n<p>If you are having this problem with any other input field being wrongly autofilled I'd try this method.</p>\n"}, {'answer_id': 70981166, 'author': 'frank edekobi', 'author_id': 11011337, 'author_profile': 'https://Stackoverflow.com/users/11011337', 'pm_score': 3, 'selected': False, 'text': "<pre><code>&lt;input autocomplete=&quot;off&quot; aria-invalid=&quot;false&quot; aria-haspopup=&quot;false&quot; spellcheck=&quot;false&quot; /&gt;\n</code></pre>\n<p>i find it works for me on all browsers. When I make use of only the autocomplete it doesn't work except i combine all the attributes that you see. Also i got the solution from google form input field</p>\n"}, {'answer_id': 71739502, 'author': 'Dieter Bender', 'author_id': 2569076, 'author_profile': 'https://Stackoverflow.com/users/2569076', 'pm_score': 0, 'selected': False, 'text': '<p>Browser ignores autocomlete on readonly fields. This code makes all writable filds readonly till it\'s focused.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>$(_=&gt;{$(\'form[autocomplete=off] [name]:not([readonly])\').map((i,t)=&gt;$(t).prop(\'autocomplete\',t.type==\'password\'?\'new-password\':\'nope\').prop(\'readonly\',!0).one(\'focus\',e=&gt;$(t).prop(\'readonly\',!1)));\n})</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;\n&lt;form method="post" autocomplete="off"&gt;\n&lt;input name="user" id="user" required class="form-control" /&gt;\n&lt;label class="form-label" for="user"&gt;New User&lt;/label&gt;\n&lt;hr&gt;\n&lt;input type="password" name="pass" id="pass" minlength="8" maxlength="20" /&gt;\n&lt;label class="form-label" for="pass"&gt;New Passwort&lt;/label&gt;\n&lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 72450902, 'author': 'DLK', 'author_id': 19168006, 'author_profile': 'https://Stackoverflow.com/users/19168006', 'pm_score': 0, 'selected': False, 'text': '<p>I was looking arround to find a solution to this but none of them worked proberly on all browsers.</p>\n<p>I tried autocomplete off, none, nope, new_input_64, (even some funny texts) because the autoComplete attribute expects a string to be passed, no matter what.</p>\n<p>After many searches and attempts I found this solution.</p>\n<p>I changed all <code>input</code> types to <code>text</code> and added a bit of simple CSS code.</p>\n<p>Here is the form:</p>\n<pre><code>&lt;form class=&quot;row gy-3&quot;&gt;\n  &lt;div class=&quot;col-md-12&quot;&gt;\n    &lt;label for=&quot;fullname&quot; class=&quot;form-label&quot;&gt;Full Name&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;fullname&quot; name=&quot;fullname&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;col-md-6&quot;&gt;\n    &lt;label for=&quot;username&quot; class=&quot;form-label&quot;&gt;User Name&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;col-md-6&quot;&gt;\n    &lt;label for=&quot;email&quot; class=&quot;form-label&quot;&gt;Email&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;email&quot; name=&quot;email&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;col-md-6&quot;&gt;\n    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Password&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control pswd&quot; id=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;col-md-6&quot;&gt;\n    &lt;label for=&quot;password&quot; class=&quot;form-label&quot;&gt;Confirm Password&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control pswd&quot; id=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;col-md-12&quot;&gt;\n    &lt;label for=&quot;recaptcha&quot; class=&quot;form-label&quot;&gt;ReCaptcha&lt;/label&gt;\n    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;recaptcha&quot; name=&quot;recaptcha&quot; value=&quot;&quot;&gt;\n  &lt;/div&gt;\n&lt;/form&gt;\n</code></pre>\n<p>The CSS code to hide password:</p>\n<pre><code>.pswd {\n    -webkit-text-security: disc;\n}\n</code></pre>\n<p><strong>Tested on Chrome, Opera, Edge.</strong></p>\n'}, {'answer_id': 72461000, 'author': 'tripleJ', 'author_id': 6113501, 'author_profile': 'https://Stackoverflow.com/users/6113501', 'pm_score': 1, 'selected': False, 'text': "<p>Since the behavior of <code>autocomplete</code> is pretty much unpredictable over different browsers and versions, my approach is a different one. Give all input elements for which you want to disable autofill the <code>readonly</code> attribute and only disable it on focus.</p>\n<pre><code>  document.addEventListener('click', (e) =&gt; {\n    readOnlys.forEach(readOnly =&gt; {\n      if (e.target == readOnly) {\n        readOnly.removeAttribute('readonly', '');\n        readOnly.style.setProperty('pointer-events', 'none');\n      } else {\n        readOnly.setAttribute('readonly', '');\n        readOnly.style.setProperty('pointer-events', 'auto');\n      }\n    });\n  });\n  document.addEventListener('keyup', (e) =&gt; {\n    if (e.key == 'Tab') {\n      readOnlys.forEach(readOnly =&gt; {\n        if (e.target == readOnly) {\n          readOnly.removeAttribute('readonly', '');\n          readOnly.style.setProperty('pointer-events', 'none');\n        } else {\n          readOnly.setAttribute('readonly', '');\n          readOnly.style.setProperty('pointer-events', 'auto');\n        }\n      });\n    }\n  });\n</code></pre>\n<p>If you want to make sure that users can still access the fields if they have disabled JS, you can set all <code>readonly</code>s initially via JS on page load. You can still use the <code>autocomplete</code> attribute as a fallback.</p>\n"}, {'answer_id': 73131074, 'author': 'softcod.com', 'author_id': 3549491, 'author_profile': 'https://Stackoverflow.com/users/3549491', 'pm_score': 0, 'selected': False, 'text': '<p>This will fix this problem</p>\n<pre><code>autocomplete=&quot;new-password&quot;\n</code></pre>\n'}, {'answer_id': 73805778, 'author': 'Kavindu Pasan Kavithilaka', 'author_id': 13784005, 'author_profile': 'https://Stackoverflow.com/users/13784005', 'pm_score': 0, 'selected': False, 'text': '<p><strong>2022 September</strong></p>\n<p>Some browsers such as Google Chrome does not even care the value of <code>autocomplete</code> attribute. The best way to stop getting suggestions is changing the name attribute of the input to <em>something</em> that changes <em>time to time</em></p>\n<p>As of September 2022, browsers will not provide autocomplete for <strong>one time passwords</strong></p>\n<p>So we can use <code>otp</code> as the field name.</p>\n<h2>&lt;input name=&quot;otp&quot;&gt;</h2>\n'}, {'answer_id': 73806681, 'author': 'MAKSTYLE119', 'author_id': 11282779, 'author_profile': 'https://Stackoverflow.com/users/11282779', 'pm_score': 2, 'selected': False, 'text': '<p>you only need autocomplete attribute for this problem\nyou can <a href="https://www.w3schools.com/howto/howto_html_autocomplete_off.asp" rel="nofollow noreferrer">visit this page for more information</a></p>\n<pre><code>&lt;input type=&quot;text&quot; name=&quot;foo&quot; autocomplete=&quot;off&quot; /&gt;\n</code></pre>\n'}, {'answer_id': 74174941, 'author': 'HackerMF', 'author_id': 12827431, 'author_profile': 'https://Stackoverflow.com/users/12827431', 'pm_score': 0, 'selected': False, 'text': "<p>For React you can try to put this code either now under a form or above password input or between email and password inputs</p>\n<pre><code>export const HackRemoveBrowsersAutofill = () =&gt; (\n  &lt;&gt;\n    &lt;input type=&quot;email&quot; autoComplete=&quot;new-password&quot; style={ { display: 'none' } } /&gt;\n    &lt;input type=&quot;password&quot; autoComplete=&quot;new-password&quot; style={ { display: 'none' } } /&gt;\n  &lt;/&gt;\n)\n</code></pre>\n<p>One of the examples:</p>\n<pre><code>&lt;input type=&quot;email&quot;/&gt;\n&lt;HackRemoveBrowsersAutofill/&gt;\n&lt;input type=&quot;password&quot;/&gt;\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/2530', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/307/']