Question

我有一个使用jQuery的表单，该表单将创建在某些情况下要求管理员批准的代码。我现在正在专门处理的实例是否要求较低级别的用户尝试提升自己的级别（如果有人高于他们的水平，则可以允许），要求管理员批准。

对于页面上的其他inputs，我正在运行以下代码来接受“ Enter”键上的笔触，以代替按下“ Submit”按钮。

$('input[kind="pw1"]').keyup(function (key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
    }
  });

这实际上适用于到目前为止我所做的每个输入，除了我用于用户输入更高级别密码的那个输入。它与上面的代码完全相同，除了用于指定“管理员批准”输入的input[kind="adPw"]。它会尝试重新加载页面，而不是触发单击“提交”按钮。

到目前为止，我已经尝试了许多不同的修复方法：

通过ID拨打电话
取消绑定所有inputs上的其他点击
取消绑定所有.button上的其他点击
仅对此input的其他点击解除绑定
检查了所有将所有input链接到重新加载的代码
检查所有代码是否有将 any input链接到重新加载的内容

我也做了一些研究，但是我没有找到任何针对我所遇到问题的目标。我也没有在控制台中收到任何错误或警告，而且我99％确信我的所有标签都已正确关闭。

我链接到下面的JSFiddle，以便您也可以体验这个疯狂的事情。我已经对其进行了重新编码，以加快您的浏览速度。它将为您创建两个用户：admin和一个普通用户，然后它将重新加载页面。完成后，请按照以下步骤操作：

以常规用户身份登录（U：“测试人员”，P：“密码”）
- “输入键”代码在用户名input和password输入上都在这里起作用，并且肯定在这里起作用！
点击“管理用户”
将测试人员的级别更改为“ 2级”
点击“保存更改”

这是“管理员批准”框。如果单击Submit按钮，它将显示alert“ sub2”，表示单击了该按钮。如果您在input框中单击“ Enter”，它应该执行相同的操作，但是它将尝试重新加载页面。

JSFiddle： https://jsfiddle.net/claybarnard/r0cqs9dg/32/

Answer 1

在单输入<form>中按 Enter 将会自动提交表单。在大多数浏览器中，这是一个怪癖。

该特定区域是唯一有问题的区域的原因是，您所有其他<form>区域都至少有两个输入。

最简单的解决方法是向表单添加另一个（隐藏的）输入：

<form>
  <input type="text">
  <input type="text" style="display: none;" />
</form>

原文：（演示单输入表单怪癖）

$("#adPw").keyup(function(key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
  }
});

$("#submit2").on("click", function() {
  alert("sub2");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><label>Please enter a password from a Level 1 or Level 2 User.</label><br><input type="password" id="adPw"></form>

<span class="button" id="submit2">Submit</span>

解决方案：（添加了额外的输入）

$("#adPw").keyup(function(key) {
  var enterKey = key.which;

  if (enterKey == 13) {
    $("#submit2").trigger("click");
  }
});

$("#submit2").on("click", function() {
  alert("sub2");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><label>Please enter a password from a Level 1 or Level 2 User.</label><br><input type="password" id="adPw"><input style="display: none"></form>

<span class="button" id="submit2">Submit</span>

以下是您更新后的JSFiddle，其中添加了此额外的输入（由于某种原因，OP的代码在JSFiddle中不起作用）：https://jsfiddle.net/18chywap/

有关更多信息，请参见此问题： Why does forms with single input field submit upon pressing enter key in input

jQuery-按键触发重新加载，

1 个答案: