如何避免重复提交单一输入表格

How to avoid duplicate submission for single input forms?

本文关键字：单一 输入 表格 提交 何避免      更新时间：2023-09-26

我有一个单一的输入表单:

<form id="my_form">
  <input id="my_input" type="text" />
</form>

在大多数浏览器中，当用户在这个单一的输入中输入文本并点击'enter'时，表单就被提交了。这很好，但是我想更进一步，这样如果用户键入一些东西而焦点丢失，表单就会被提交。

我目前已经挖掘到jQuery的change事件如下:

$("my_input").change(function() {
  $("my_form").submit();
});

这适用于当我改变输入值并聚焦时的情况，但如果我改变输入值并点击'enter'，那么表单将被提交两次(一次为'enter'，一次为change)。

我开始尝试低级别的监听键和管理提交状态，但我认为我应该把它扔给社区，看看是否有人知道更干净的方法。

您还可以将提交事件附加到表单中，而不是使用容易出错的检查。如果该值等于旧值，请勿使用ev.preventDefault()提交表单。

var oldvalue = "";
$("#my_form").submit(function(ev){
    var newvalue = $("#my_input", this).val();
    if(newvalue == oldvalue) ev.preventDefault(); //Same value, cancel submission
    else oldvalue = newvalue;
})

您尝试过模糊事件http://api.jquery.com/blur/

当输入失去焦点时触发

只是对Rob W的解决方案的改进。

$('#my_form').submit((function () {
   //Enclose variables as to not pollute the global namespace
   var oldValue,
       input = $('#my_input');  //cache your input
   //Same concept as Rob W's solution
   return function (e) {
       var newValue = input.val();
       if(newValue === oldValue) {
          e.preventDefault();
       }
       oldValue = newValue;
   };
})());
相关文章：