Enter键功能在MVC5中无法正常工作？

Question

您好我想通过在MVC5中按Enter键从一个字段导航到另一个字段。所以我使用了Enter Key功能代码。代码如下所示。

我的观点

 <form>
 <fieldset>
 <legend></legend>
 <div class="col-sm-3">
 <div class="form-group">
 <span style="color: #f00">*</span>
 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.ValidationMessageFor(model => model.CustomerName)
 @Html.TextBoxFor(model => model.CustomerName, new { @class = "form-control required", type = "text" })
     </div>
     </div>
 <div class="col-sm-3">
 <div class="form-group">
 @Html.LabelFor(model => model.Alias, new { @class = "control-label" })
 @Html.DropDownList("SalutationID", null, "Select", new { @class = "form-control" })
 @Html.ValidationMessageFor(model => model.Alias)
     </div>
     </div>
 <div class="col-sm-3">
 <div class="form-group">
 <span style="color: #f00">*</span>
 @Html.Label("Customer Type", new { @class = "control-label" })
 @Html.DropDownList("CustomerTypeID", null, "Select", new { @class = "form-control required" })
    </div>
    </div>
 <hr style="width:100% ; align-self:baseline">
 <h3 style="color: #0000FF">Address</h3>
 <div class="col-sm-3">
 <div class="form-group">
 <span style="color: #f00">*</span>
 @Html.Label("Address Type", new { @class = "control-label" })
 @Html.DropDownList("AddressTypeID", null, "Select", new { @class = "form-control required" })
   </div>
   </div>
<div class="col-sm-3">
<div class="form-group">
<span style="color: #f00">*</span>
@Html.LabelFor(model => model.Street, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Street, new { @class = "form-control", type = "text required" })
@Html.ValidationMessageFor(model => model.Street)
    </div>
    </div>
 <div class="col-sm-3">
 <div class="form-group">
 @Html.LabelFor(model => model.Location, new { @class = "control-label" })
 @Html.TextBoxFor(model => model.Location, new { @class = "form-control", type = "text " })
 @Html.ValidationMessageFor(model => model.Location)
   </div>
   </div>
<div class="col-sm-3">
<div class="form-group">
@Html.LabelFor(model => model.Place, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Place, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.Place)
    </div>
    </div>
</fieldset>
</form>

我的Jquery代码

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript" src="./javascript.js"></script>
 <script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
 </script>
 <script type="text/javascript">
 $("form:not(.filter) :visible:enabled:first").focus();
 $('form > div').keypress(function(e) {
   debugger;
   if (e.keyCode == 13) {
   e.preventDefault();
   if ($(this).next().length > 0) {
   $(this).next().children('div').children(":not(label)").focus();
   } else {
   $("form:not(.filter) :visible:enabled:first").focus();
    }
   }
 });

我试过这段代码。在此代码中，它显示插件错误，该错误接近插件下方。

<script type="text/javascript" src="./javascript.js"></script>

我尝试了很多方法来删除此插件错误，但没有用。请任何人帮我解决这个问题。

提前谢谢..

Answer 1

看起来jQuery没有初始化。像这样使用它：

 $(function () {

$("form:not(.filter) :visible:enabled:first").focus();
 $('form > div').keypress(function(e) {
   debugger;
   if (e.keyCode == 13) {
   e.preventDefault();
   if ($(this).next().length > 0) {
   $(this).next().children('div').children(":not(label)").focus();
   } else {
   $("form:not(.filter) :visible:enabled:first").focus();
    }
   }
 });

});

请注意，您的整个javascript代码应该封装在

中

$(function () 
{ 
//Your javascript goes here 
});

我看到的另一个问题是你的本地javascript文件“javascript.js”路径不正确。您将不得不纠正它以加载您的JavaScript文件并摆脱404错误。与img.jpg文件一样。