Grow your CSS skills. Land your dream job.

Last updated on:

Turn Off Autocomplete for Input

Just use the autocomplete attribute:

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

This would be useful when a text input is one-off and unique. Like a CAPTCHA input, one-time use codes, or for when you have built your own auto-suggest/auto-complete feature and need to turn off the browser default.

Comments

  1. To make your web application iPhone and iPad friendly, you can also control whether or not automatic correction or capitalization is used in your form’s input fields. This can come in handy for username fields. Do so by implementing code along the following lines:

    To turn off autocorrect:


    <input type="text" name="some_name" autocorrect="off"></input>

    To turn off autocapitalize:


    <input type="text" name="some_name" autocapitalize="off"></input>

  2. Permalink to comment#

    autocomplete=”off” is not valid markup with XHTML Transitional, which is a common DOCTYPE. Use this to keep a vaild markup

    if (document.getElementsByTagName) {

    var inputElements = document.getElementsByTagName(“input”);

    for (i=0; inputElements[i]; i++) {

    if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {

    inputElements[i].setAttribute(“autocomplete”,”off”);

    }

    }

    }

  3. a dev
    Permalink to comment#

    thx a lot u solved my problem :)

  4. Permalink to comment#

    Thank You…The Javascripts works for me :)

  5. asd
    Permalink to comment#

    asfsda

  6. Is there anyway to style the autocomplete? (without js)
    I have seen:
    #inputId:-webkit-autofill {
    background-color: white !important;
    } (bug)

    But it is not working and only for webkit browsers. I have a large font-size for “placeholder=”blabla” and need autocomplete. The autocomplete with this font size is look horrific…
    So:
    .search_field{font-size: 1.5em;} (input)
    .search_field:-webkit-autofill{font-size: .9em;}(autofill)

    :)

  7. Paresh
    Permalink to comment#

    The autofill feature on iOS not always work based on the site being surfed. I have web application when browsed on iPad the autofilll does not work. Is there any trick to enable it? Please advise

  8. Vivek Doshi
    Permalink to comment#

    There is a small issue using, when the page is validated with w3c validator it shows error “there is no attribute “autocomplete””

  9. Martin Delille
    Permalink to comment#

    I ask stackexchange.com to add this feature providing a link to your blog article: http://meta.stackoverflow.com/q/148009/195437

  10. kunal
    Permalink to comment#

    Add form Tag autocomplete=”off” you don’t need add individual input tag for auto complete off

  11. Cormorand
    Permalink to comment#

    Probably not a good idea if your visitors use Chrome, kunal.

    See http://stackoverflow.com/questions/7973462/chrome-ugly-message-when-autofill-is-disabled.

  12. Thanks, autocomplite attribute is part of HTML5 works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

  13. Just tried adding autocomplete=off to each input field – that didn’t work, but adding it to whole form does.

    i.e. input autocomplete="off" / – no go, form autocompete="off" – works…unless there’s something wrong with my browser(s).

  14. Y.V.Ramana
    Permalink to comment#

    ust tried adding autocomplete=off to each input field – that didn’t work, but adding it to whole form does.

    i.e. input autocomplete=”off” / – no go, form autocompete=”off” – works…unless there’s something wrong with my browser(s).

  15. Great! you save my time. Thanks a lot. But one more thing, its not w3c valid attribute. What should we do to get validation but still using autocomplete off feature? Thanks in advance.

  16. shaikamjad
    Permalink to comment#

    Guys it’s not working, if I use the Jquery method to turn off the autocomplete feature :(

  17. puttyshell
    Permalink to comment#

    I have to swap the username and password fields. And let the username float left. Otherwise, the username and password are auto filled.

  18. Lienkie
    Permalink to comment#

    I know your going to laugh, but where do I enter that? (<input…..)? I would really like to disable autocomplete in my browsers, and I can't get it right on the registry.

  19. Jair

    none of the above solutions worked for me. :(

  20. Chrome seems to be ignoring the autocomplete attribute as of version 34.

  21. Ronak

    $(document).ready(function(){
    $(‘:input’).live(‘focus’,function(){
    $(this).attr(‘autocomplete’, ‘off’);
    });
    });

  22. karps
    Permalink to comment#

    I have set the attribute of autocomplete=”off”. But safari browser autocomplete is working. How to slove the autocomple off problem?!!

  23. If you need to disable autocomplete for a password field, feel free to use a plugin I created: https://github.com/say2joe/jquery.disable-autocomplete

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".