将焦点设置在文本框上 - MVC3

Question

如何在MVC3中为以下Razor代码设置页面加载时"Amount"文本框？

        <tr>
            <th>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Amount)
                </div>                            
            </th>
             <td>
                 <div class="editor-field">
                    @Html.EditorFor(model => model.Amount)
                    @Html.ValidationMessageFor(model => model.Amount)
                 </div>                          
            </td>
        </tr>

Answer 1

您可以为包含div提供一个额外的类:

<div class="editor-field focus">
    @Html.EditorFor(model => model.Amount)
    @Html.ValidationMessageFor(model => model.Amount)
</div> 

然后你可以使用jQuery类选择器:

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

这Amount就是说你似乎在一个表中有多个texbox,显然一次只有一个可以拥有焦点.因此,假设您希望这是第一个,您可以这样做:

$('.focus :input:first').focus();

Answer 2

使用符合html 5标准的浏览器设置自动对焦

<input type="text" autofocus="autofocus" />

如果你需要IE支持,你需要使用javascript

 <input type="text" id=-"mytextbox"/>
  <script type="text/javascript">document.getElementById('mytextbox').focus();</script>

用剃刀:

@Html.EditorFor(model => model.Amount,new{@autofocus="autofocus"})

Answer 3

打开/Views/Shared/Site.Master文件,并在jquery脚本包含此脚本后输入以下内容:

<script type="text/javascript">
    $(function () {
        $("input[type=text]").first().focus();
    });
</script>

这将把焦点设置在应用程序中每个表单上的第一个文本框中,而无需编写任何其他代码!

取自http://www.tcscblog.com/2011/03/24/setting-default-focus-in-mvc-applications-with-jquery/

Answer 4

诀窍是这些输入元素总是有一个id属性,您可以将其作为字符串获取Html.IdFor.所以你可以用Javascript集中你想要的那个:

document.getElementById("@Html.IdFor(model => model.Amount)").focus();

或者,如果您更喜欢jQuery:

$("#" + "@Html.IdFor(model => model.Amount)").focus();