Как установить фокус на текстовое поле Html.TextBoxFor - mvc 2

Question

Я пытаюсь установить фокус на текстовом поле, которое генерируется следующим образом:

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

Я пытался использовать JavaScript, который не сильно помог:

   <script type="text/javascript">
       var txtBox = document.getElementById("Email");
       if (txtBox != null) txtBox.focus();
    </script>

Как установить фокус на текстовое поле Html.TextBoxFor в mvc 2?

Answer 1

Где вы пишете этот JavaScript? Вы должны убедиться, что DOM загружен:

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

Также HTML-помощники могут генерировать разные идентификаторы в зависимости от контекста: например, если вы вызываете TextBoxFor внутри шаблона редактора.

Сказав это, я не рекомендую вам это решение. Чтобы решить все эти проблемы, я обычно применяю класс css к текстовому полю:

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

где email класс определяется следующим образом:

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

, а затем используйте популярный javascript framework , чтобы установить фокус, когда DOM готов:

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

Answer 2

Вы можете использовать автофокус в HTML5 . <%=Html.TextBoxFor(model => model.Email, new { style = "width:190px;Border:0px", maxsize = 190 ,autofocus = "autofocus" })%>