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>
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" />
Couple of points
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");
})
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.
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")
}
}
Use autocomplete = "off"
Html.BeginForm("ValidateLogin", "Login", FormMethod.Post, htmlAttributes: new { id = "submitForm", autocomplete = "off" })
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
Mark the login button as disabled.
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();
});
