web-dev-qa-db-ja.com

テキストボックスにフォーカスを設定するにはどうすればよいですかHtml.TextBoxFor--mvc 2

次の方法で生成されるテキストボックスにフォーカスを設定しようとしています。

<%=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>

Mvc 2のテキストボックスHtml.TextBoxForにフォーカスを設定するにはどうすればよいですか？

javascripthtmlasp.net-mvcfocushtml-helper
15
Liad Livnat

このJavaScriptをどこに書いていますか？ DOMがロードされていることを確認する必要があります。

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

また、HTMLヘルパーは、コンテキストに応じて異なるIDを生成する場合があります。たとえば、エディターテンプレート内でTextBoxForを呼び出す場合です。

これを言っても、それは私があなたに勧める解決策ではありません。これらすべての問題を解決するために、私は通常、cssクラスをテキストボックスに適用します。

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

ここで、emailクラスは次のように定義されています。

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

次に、 人気のあるjavascriptフレームワーク を使用して、DOMの準備ができたときにフォーカスを設定します。

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

HTML5 でオートフォーカスを使用できます。 <%=Html.TextBoxFor(model => model.Email, new { style = "width:190px;Border:0px", maxsize = 190 ,autofocus = "autofocus" })%>

7
AR M