Question

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

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

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

有什么好的方法可以解决这个问题吗？也许我需要使每个input.onBlur事件检查表单其他输入的当前焦点状态？

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

Answer 1

鉴于每个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，并提供示例

Answer 2

根据我的评论，如果您的表格太大，则实际上不应该使用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>

失去重点时提交表格

2 个答案: