How do i set focus to a text box Html.TextBoxFor - mvc 2

Question

Hi, I'm trying to set focus on a text box which generated in the following way:

<%=Html.TextBoxFor(model => model.Email, new { style = "width:190px;Border:0px", maxsize = 190 })%>

i tried to use javascript which didnt help much.

var txtBox = document.getElementById("Email"); if (txtBox != null) txtBox.focus();

Can someone help? Thanks.

Answer 1

Where are you writing this javascript? You need to make sure that the DOM is loaded:

window.onload = function() {
    var txtBox = document.getElementById("Email"); 
    if (txtBox != null) { 
        txtBox.focus();
    }
};

Also HTML helpers might generate a different ID depending on the context: for example if you are calling the TextBoxFor inside an editor template.

Having said this it is not the solution I would recommend you. To solve all those problems I usually apply a css class to the textbox:

<%=Html.TextBoxFor(
    model => model.Email, 
    new { @class = "email", maxsize = "190" }) %>

where email class is defined like this:

.email {
    width: 190px;
    border: 0;
}

and then use a popular javascript framework to set the focus when the DOM is ready:

$(function() {
    $('input.email').focus();
});