How to disable autocomplete in MVC Html Helper

asp.net Mvc

asp.net Mvc Problem Overview


I have a typical ADO.NET EF-driven form that allows the user to input a date. I have put a jQuery datepicker on it but when the user goes to select a date the browser shows some other entries in a dropdown. How do I turn off that dropdown? In traditional ASP.NET I would put autocomplete="off". Not sure of the MVC equivalent.

<div class="editor-field">
    <%= Html.TextBoxFor(model => model.date, new { @class = "aDatePicker" })%>
    <%= Html.ValidationMessageFor(model => model.date) %>
</div> 

asp.net Mvc Solutions


Solution 1 - asp.net Mvc

Try this:

<%= Html.TextBoxFor(
    model => model.date, 
    new { @class = "aDatePicker", autocomplete = "off" }
)%>

It will generate markup that is close to the following:

<input type="text" id="date" name="date" class="aDatePicker" autocomplete="off" />

Solution 2 - asp.net Mvc

Couple of points

  1. If you've more or less already written the site and you don't want to go back and modify all your cshtml to disable autocomplete (we would have had to go back and change hundreds of lines of code throughout the site), you can disable it via Javascript with a ready handler, like so:

     //Disable autocomplete throughout the site
     $(document).ready(function() {
         $("input:text,form").attr("autocomplete","off");
     })
    
  2. From what I've read you need to disable it at both the form and the textbox level in order for it to work on all versions of Firefox and IE.

Solution 3 - asp.net Mvc

I used Darin's above and applied it successfully to a demo:

    @model RequestAQuote.Models.RequestAQuoteModel
    @{
        ViewBag.Title = "Request a Free Quote";
        List<string> ProjectTypes = new List<string>();
        ProjectTypes.Add("Electrical Wiring");
        ProjectTypes.Add("Install Breakers");
        ProjectTypes.Add("Ceiling Fan");
        ProjectTypes.Add("Replace Light");
        ProjectTypes.Add("Replace Outlet");    
    }

    <h2>Request A Quote</h2>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary()
        <fieldset>
            <legend>Request a Quote Form</legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.ProjectType)
                    @Html.DropDownListFor(m => m.ProjectType, new MultiSelectList(ProjectTypes))
                </li>
                <li>
                    @Html.LabelFor(m => m.ContactName)
                    @Html.EditorFor(m => m.ContactName, new { autocomplete = "off" })
                </li>
                <li>
                    @Html.LabelFor(m => m.DaTimePhone)
                    @Html.EditorFor(m => m.DaTimePhone, new { autocomplete = "off" })
                </li>
                <li>
                    @Html.LabelFor(m => m.Email)
                    @Html.EditorFor(m => m.Email, new { autocomplete = "off" })
                </li>
                <li>
                    @Html.LabelFor(m => m.ProjectDescription)
                    @Html.EditorFor(m => m.ProjectDescription, new { autocomplete = "off" })
                </li>
            </ol>
            <input type="submit" value="Request Quote" />
        </fieldset>
    }

    @section scripts 
    {
        @Scripts.Render("~/bundles/jqueryval")
    }

    }

Solution 4 - asp.net Mvc

Use autocomplete = "off"

Html.BeginForm("ValidateLogin", "Login", FormMethod.Post, htmlAttributes: new { id = "submitForm", autocomplete = "off" })

Solution 5 - asp.net Mvc

I have been frustrated by this for some time. It is a security risk to have the Login fields remembered. Particularly if the user leaves the screen up.

My solution was to

  1. Mark the login button as disabled.

  2. In the javascript/ jquery ready method I put a setTimeout function for 500 ms which a - Clears the password textbox, e.g. $('#Password').val('') b - Enable the Login button loginFtns = function(){ var that []; that is a namespaced function containtin the methods that.clearPassword = function() { $('#Password').val(''); $('#LoginBtn').prop('disabled', false); }; that.init = function() { that.initEvents(); setTimeout(function() { that.clearPassword(); }, 500); }; return that; }();

     $().ready(function() {
            loginFtns.init();
        });
            
     
    

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMattView Question on Stackoverflow
Solution 1 - asp.net MvcDarin DimitrovView Answer on Stackoverflow
Solution 2 - asp.net MvcJohn WuView Answer on Stackoverflow
Solution 3 - asp.net MvcPCPGMRView Answer on Stackoverflow
Solution 4 - asp.net MvcKarthik LalView Answer on Stackoverflow
Solution 5 - asp.net MvcJerryView Answer on Stackoverflow