在文本框上设置焦点 – MVC3

如何在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> 

5 Solutions collect form web for “在文本框上设置焦点 – MVC3”

你可以提供一个额外的类到包含div:

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

然后你可以使用一个jQuery类select器:

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

这就是说,你似乎有一个表中的多个Amount texboxes,显然只有一个可以在一个时间焦点。 所以假设你想这是第一个,你可以这样做:

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

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

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

与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"}) 

诀窍是这些input元素总是有一个id属性,你可以用Html.IdFor作为string。 所以你可以用Javascript来关注你想要的:

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

或者,如果你更喜欢jQuery:

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

我正在使用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> 
  • razor的意见是不给编译时错误
  • 在JavaScript中使用Razor
  • 将checkbox列表传入视图并将IENumerable拉出
  • 用剃刀显示编码的html
  • MVC3 Razor DropDownListFor枚举
  • 如何在ASP.Net MVC视图中访问查询string?
  • @media媒体查询和ASP.NET MVC剃刀语法冲突
  • 在razor文件中的@functions代码块是做什么的,什么时候(如果曾经)我应该使用它?
  • MVC @RenderSection“部分已被定义,但尚未呈现”脚本。 当多层次的页面
  • ASP.NET MVC从数据库加载Razor视图
  • 如何在razor文件中指定CSS @media?