时间戳

首页 > 解决方案 > jQuery - 按键触发重新加载并且不应该

javascript - jQuery - 按键触发重新加载并且不应该

问题描述

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

对于页面上的其他几个inputs，我运行以下代码以接受“Enter”键上的笔划，以代替按下“提交”按钮。

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

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

这实际上适用于我迄今为止所做的每一个输入，除了我用于用户输入更高级别密码的那个。它与上面的代码完全相同，只是它input[kind="adPw"]指定了 Admin Approval 输入。它不会触发点击提交按钮，而是尝试重新加载页面。

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

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

我正在链接到下面的 JSFiddle，以便您也可以体验这个疯狂的事情。我已经对其进行了重新编码，以加快您在那里的时间。它将为您创建两个用户：管理员和普通用户，然后它将重新加载页面。当它发生时，请按照下列步骤操作：

  1. 以普通用户登录（U：“tester”，P：“password”）
    • “回车键”代码在用户名input和password输入上都有效，而且在这里绝对有效！
  2. 点击“管理用户”
  3. 将测试人员的级别更改为“2 级”
  4. 点击“保存更改”

这是管理员批准框。如果点击提交按钮，它会给出alert“sub2”，表示点击了按钮。如果您在input框中按“Enter”，它应该做同样的事情，但它会尝试重新加载页面。

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

标签： javascriptjqueryhtml

解决方案

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

这个特定区域是唯一存在问题的区域的原因是因为您的所有其他<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 on press enter key in input

推荐阅读