失去焦点时提交表单

Question

我必须构建一个包含大量字段（可能 >1000 个字段）的表单。由于recommended GET URL length limit，我想将其拆分为几个较小的表单（每个表单有 12 个字段），在完成后提交。

基本上我正在寻找的是某种 form.onBlur 事件：我只想在以下情况下提交表单：

• 其中一个输入失去焦点（模糊）
• 此表单的其他输入都没有焦点

关于处理这个问题的好方法有什么想法吗？也许我需要让每个 input.onBlur 事件检查表单其他输入的当前焦点状态？

编辑：我非常了解 GET 与 POST，包括安全问题和数据量。对于我的特定设置的特定问题，GET 请求是唯一的选择；所以这个问题。

Answer 1

根据我的评论，如果您的表单那么大，您真的不应该使用GET。另外，GET 请求仅在您想清楚地保留浏览器历史记录中的状态时才有用。在您的情况下，实际上使用 POST 更有意义。

抛开技术性问题不谈，您可能想看看从表单中的任何输入元素中听到focusout event 冒泡。附加blur 事件感觉很直观，但由于它不会冒泡，因此您必须将其附加到每个输入元素，这很昂贵。

formElement.addEventListener('focusout', e => {
  formElement.submit();
});

document.getElementById('my-form').addEventListener('focusout', e => {
  console.log('focus lost');
});

input, textarea, select {
  display: block;
}

<form id="my-form">
  <input type="text" />
  
  <input type="checkbox" />
  
  <input type="radio" name="group1" value="1" />
  <input type="radio" name="group1" value="2" />
  <input type="radio" name="group1" value="3" />
  
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</form>

Answer 2

鉴于每个 form_element 都可以通过一个类来识别，你可以用它来做一些有风格的事情

$(".form_element").on("focusout", function(){
  let do_query = true;
  setTimeout(function(){
     $(".form_element:input").each(function(){ 
       if($(this).is(":focus")){
         do_query = false;
         return false; //Exit the each loop
       }
     });

     if(do_query){
        console.log("I'm going to perform the query");
     }

  }, 200);
});

我发现如果没有设置超时，它总是会触发 false，因为新元素没有时间获得它的焦点。

在此处查看jsfiddle 的工作示例