Question

我有一个输入表单：

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

在大多数浏览器中，当用户在此单个输入中键入文本并点击“输入”时，表单将被提交。这很好，但我想更进一步，以便如果用户输入内容并且焦点丢失，则提交表单。

我目前正在使用jQuery的change事件：

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

这适用于我更改输入值并将注意力集中但是如果我更改输入值并点击“输入”然后表单提交两次（一次用于'输入'和一次用于change）

我开始走低级别的道路，听取密钥并管理提交状态，但我想把它扔给社区，看看是否有人知道更清洁的方式。

Answer 1

您还可以将提交事件附加到表单，而不是弄乱容易出错的检查。如果该值等于旧值，请不要使用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;
})

Answer 2

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

当输入失去焦点时会触发。

Answer 3

对 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;
   };
})());

如何避免单个输入表单的重复提交？

3 个答案: