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. User Avatar
    Mat Garland

    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. User Avatar
    Ryan
    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. User Avatar
    a dev
    Permalink to comment#

    thx a lot u solved my problem :)

  4. User Avatar
    Mac Hary
    Permalink to comment#

    Thank You…The Javascripts works for me :)

  5. User Avatar
    asd
    Permalink to comment#

    asfsda

  6. User Avatar
    Ghost

    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    kunal
    Permalink to comment#

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

  11. User Avatar
    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. User Avatar
    Idham Perdameian
    Permalink to comment#

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

  13. User Avatar
    BrandOwner
    Permalink to comment#

    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).

    • User Avatar
      Paul Warelis

      Well, now your input controls will not COMPETE with one another, ha!

  14. User Avatar
    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. User Avatar
    Tapan Kumer Das
    Permalink to comment#

    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. User Avatar
    shaikamjad
    Permalink to comment#

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

  17. User Avatar
    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.

    • User Avatar
      Amarpreet
      Permalink to comment#

      Hi
      I am facing the problem where if we click on add new user form in my application, Firefox autofills username and password with administrator username and password. How did you solved this? Can you please explain. I need to urgently implement this.

  18. User Avatar
    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. User Avatar
    Jair

    none of the above solutions worked for me. :(

  20. User Avatar
    Sascha Trinkaus

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

  21. User Avatar
    Ronak
    $(document).ready(function(){
        $(':input').live('focus',function(){
            $(this).attr('autocomplete', 'off');
        });
    });
    
  22. User Avatar
    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. User Avatar
    Joe Johnson
    Permalink to comment#

    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

  24. User Avatar
    salem
    Permalink to comment#

    Nice snippet! Thanks!

  25. User Avatar
    Cami

    Setting the autocomplete attribute to “off” does not disable Chrome autofill in more recent versions of Chrome. Instead you must set autocomplete on each input as follows
    <input autocomplete="smartystreets">
    you can set autocomplete to anything besides “on” or “off” and it will disable Chrome autofill

  26. User Avatar
    Niklas R

    None of the above works. I tried setting autocomplete=off, I tried setting the meta tag to no cache, I tried programatically setting the values with jquery and I tried to explicitly setting the value to nothing. Why is nothing possible when we need this simple functionality? It is a time thief that html, css and javascript are so lousy tools they can’t even make the simple things simple. This is a simple task so it should be simple and there should be one obvious solution so where is the obvious solution?

    • User Avatar
      Clint
      Permalink to comment#

      Not sure if you’re still looking for a solution, but I was in the same boat, spent a few hours on this 1 BS problem, and finally found this solution that worked:

      <!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
      <input style="display:none" type="text" name="fakeusernameremembered"/>
      <input style="display:none" type="password" name="fakepasswordremembered"/>
      

      Literally just put those two fake fields above your actual input fields in your form and chrom will autofill those instead. Problem solved! :D

      originally found here:
      http://www.tech.theplayhub.com/disabling_chrome_autofill/

  27. User Avatar
    Clint
    Permalink to comment#

    My previous comment ended up no longer working as well, but there was another comment later down the list of comments that did work for me:

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

    This basically makes it so that the field is locked until you click in there. This worked every time for me without having any of the other workarounds in place (of which I had tried them all, even salting the url string and autocomplete fields with random numbers!)

    • User Avatar
      joy picar

      thank u clint!!! this really works for me!!!

    • User Avatar
      Random
      Permalink to comment#

      Awesome..!! You are Gem..!!

    • User Avatar
      PersonX
      Permalink to comment#

      This will not work in all cases. for example name text field and then password field set to readonly. Once you click the the password readonly field you now have made it not readonly, then if you go back and auto-fill the previous name field the password field will be auto-filled.

  28. User Avatar
    Nick
    Permalink to comment#

    I’d much sooner use jQuery to do this:

    // Remove auto inputs on mobile
    $(‘.ginput_container input’).attr({
    autocomplete: “off”,
    autocapitalize: “off”,
    autocorrect: “off”
    });

  29. User Avatar
    HQF Development - Pons Olivier
    Permalink to comment#

    It’s far simpler than all solutions. Go to stackoverflow and there’s one perfect suggestion:

    Instead of autocomplete=”off” use autocomplete=”false”

    and it works.

  30. User Avatar
    Prad
    Permalink to comment#

    Hi autocomplete is working fine, but the autocomplete bar(that sits above the android keypad still exists without autocomplete text. Can any one please suggest me how do I hide it using JAVASCRIPT and CSS.

  31. User Avatar
    Prad
    Permalink to comment#

    Hi autocomplete is working fine, but the autocomplete bar(that sits above the android keypad still exists without autocomplete text, that hides the login button so) Can any one please suggest me how do I hide it using JAVASCRIPT and CSS.

  32. User Avatar
    M R Raja
    Permalink to comment#

    Why Don’t Everyone Use This….

            <form>
                <div class="user">
                <i> </i>
                <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
                </div>          
                <div class="user1"> 
                <i> </i>        
                <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
                </div>
                <div class="user2">                         
                <input type="submit" value="Login">
                </div>
            </form>
    

    It’s So Simple… :)

  33. User Avatar
    Gopal Sharma
    Permalink to comment#

    Hello ,

    the whole page autocomplete off is by applying this “autocomplete=off” into the form-tag.

      <form action="" method="post" autocomplete="off">
    

    that’s it.
    Thanks to all

  34. User Avatar
    Slava
    Permalink to comment#

    This trick doesn’t work any more for password fields. Browsers are ignoring autocomplete.

  35. User Avatar
    SKOLZ
    Permalink to comment#

    you can avoid passwords autocomplete by adding autocomplete="new-password" to the password field

  36. User Avatar
    pit
    Permalink to comment#

    Try autocomplete=”false”

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag