防止使用回车键多次提交表单答案

【问题标题】：Prevent multiple time form submit with enter key防止使用回车键多次提交表单
【发布时间】：2016-07-19 10:42:59
【问题描述】：

下面是我的代码

$('#myDIV').keydown(function (event) {
      var key=event.which || event.charCode;
      if(key == 13)  // the enter key code
      {
        event.preventDefault();
        importItem();
      }
});

当我多次按下 enter 按钮时，importItem() 被多次调用，我该如何防止这种情况发生？我这里没有提交功能来使用 issubmitted 类型的代码。

【问题讨论】：

你可以这样试试var checker = true; $('#myDIV').keydown(function(event) { var key = event.which || event.charCode; if (checker) { if (key == 13) // the enter key code { event.preventDefault(); importItem(); checker = false; } } });
它不允许我在不刷新页面的情况下第二次使用不同的表单输入键
点击事件？你的意思是keydown事件？
是的，我很喜欢上面评论中的示例，请检查
checker 会在我每次按回车键时变为真，恐怕这行不通。

标签： jquery enter

【解决方案1】：

// Define a global flag
allowSubmit = true

// And in your custom submit event function
if allowSubmit
   $('#yourForm').submit() #Fire native submit function manually here
   allowSubmit = false
else
   return false

【讨论】：

【解决方案2】：

您可以通过在验证其数据后创建一个事件来阻止提交来做到这一点，例如：

const form = document.querySelector("form")

function importItem(e){
  // Your function...

  e.preventDefault() // Remove this
  console.log("Form submitted")

  form.removeEventListener("submit", importItem)
  form.addEventListener("submit", e => e.preventDefault())
}

form.addEventListener("submit", importItem)

<form>
  <input type="text" placeholder="Hold enter key">
</form>

注意：使用第一个e.preventDefault()，因此表单无法重定向页面，您可以将其删除。

【讨论】：

【解决方案3】：

使用 setTimeout() 来延迟和防止多次执行代码。

    var timeout = null;
    $('#myDIV').keydown(function (event) {
          var key=event.which || event.charCode;
          if(key == 13)  // the enter key code
          {
            event.preventDefault();
            if(timeout != null){
                clearTimeout(timeout);
                timeout = null;
            }
            timeout = setTimeout(function(){
               importItem(); 
            }, 1000);
          }
    });

【讨论】：

我在提交表单时按了回车键，然后又提交了多次
所以你想在允许另一个回车键之前先完成提交？
是的，在提交表单后，我只希望输入键在按下后再次触发
你能把你的函数也发一下吗importItem()