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();

Answer 5

我正在使用MVC4 / Razor，并且碰巧在我的项目中没有Site.Master文件，但是，我确实有一个适用于每个页面的_Layout.cshtml文件（Views / Shared / _Layout。 cshtml），所以我把它添加到该文件中的现有脚本，如下所示。这对我很有用。

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
            // ajaxSetup code here...
            }
        });
        // Set the focus to the first textbox on every form in the app
        $("input[type=text]").first().focus();
    });
</script>

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

5 个答案: