在文本框上设置焦点 - MVC3答案

【问题标题】：Set Focus on a Textbox - MVC3在文本框上设置焦点 - MVC3
【发布时间】：2011-10-22 00:30:47
【问题描述】：

如何在 MVC3 中为以下 Razor 代码设置页面加载时的“金额”文本框？

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

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 razor

【解决方案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();

【讨论】：

完美！有效。这是一个简单而伟大的解决方案。非常感谢你，你为我节省了很多时间。 Stackoverflow 的用户很棒！他们帮助了我很多次，我真的很感激。
jQuery 类选择器去哪了？在表单上方的脚本部分中？
@JenniferS 你找到这个问题的答案了吗？
我把它放在一个母版页里。。一切都好。
可以将它放在母版页中，但它不适用于部分视图。最好创建一个脚本文件，在 BundleConfig.cs 中放置引用，然后在母版页和您可能拥有的任何部分视图中使用 '@Script.Render("~/bundles/")'。跨度>

【解决方案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"})

【讨论】：

支持所有主流浏览器（最新）、Internet Explorer 10（但 bot IE9）、Firefox、Opera、Chrome 和 Safari。
这些天来这是一个更好的答案，尽管这个问题没有具体说明关于 html5 的任何内容
这是 MVC5 与 HTML 帮助程序最干净最简单的方法，效果很好。
这才是真正的答案。

【解决方案3】：

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

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

这会将焦点设置到应用程序中每个表单上的第一个文本框，而无需编写任何额外的代码！

【讨论】：

我在表单上的第一个输入是一个数字，所以我将其更改为 $("input[type=number]").first().focus();它奏效了。但是，它现在不适用于第一个输入是文本。这是 EF 表列中的数据类型，而不是输入类型。任何想法如何首先检查类型？
您不需要 [type=...] 但这有助于确保您在应用程序中选择正确的标签。您也许可以摆脱 $("input").first().focus();

【解决方案4】：

诀窍在于这些输入元素始终具有id 属性，您可以使用Html.IdFor 将其作为字符串获取。因此，您可以使用 Javascript 专注于您想要的：

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

或者，如果您更喜欢 jQuery：

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

【讨论】：

我尝试了您的解决方案，但没有成功。我尝试了 Darin Dimitrov 的解决方案，它奏效了。谢谢！

【解决方案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>

【讨论】：

感谢您添加此内容。现在我开始使用 MVC4/Razor，这为我节省了很多！
很高兴您发现它对您有帮助！
如果输入绑定到表中的数字列则不起作用。然后你必须使用 type=number。