更新

Question

当用户单击“提交”时，我试图禁用传递给addEventListener的功能。如果用户在任何字段上输入了数据，我都会输入代码以防止用户离开页面。这很好。如果用户尝试导航，则会收到预期的警告。但是，一旦填充了所有字段并且用户单击“提交”，我似乎无法弄清楚如何禁用此功能。就目前情况而言，系统会提示他们确保单击“提交”时要离开导航，而我不希望用户单击“提交”时发生这种情况。

我已经尝试了以下类似方法，以尝试基于提交取消绑定beforeunload函数，但这是行不通的。我觉得这是正确的总体思路，但我正努力按照自己的意愿来完成这项工作。

$('form').submit(function() {
  $(window).unbind('beforeunload');
});

$(window).on('beforeunload',function(){
  return '';
});

下面的代码按预期工作：

window.addEventListener('beforeunload', function (event) {
  console.log('checking form');

  let inputValue = document.querySelector('#myInput').value;

  if (inputValue.length > 0) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }

  event.preventDefault();
});

如果用户单击“提交”，则我希望基本上关闭beforeunload功能。

Answer 1

如果您使用.on()绑定处理程序，则可以使用.off()删除绑定的事件

$('form').submit(function() {
  $(window).off('beforeunload');
});

$(window).on('beforeunload',function(){
  return '';
});

但是，我认为在您的情况下，如果您按照逻辑方式处理表单提交，则根本不需要beforeunload。

我已经模拟了一个示例，该示例说明了如果用户选择根据条件（在这种情况下，如果未填写所有字段）提交表单，则如何逻辑上提交表单。

$('form').on('submit', function (e) {
  var inputs = $(':text', this);
  console.log(inputs.length)
  var validInputs = inputs.filter(function () {
    return $(this).val().length;
  }).length;
  if (validInputs > 0 && validInputs < inputs.length) {
    var r = confirm("Are you sure you want to leave?");
    if (!r) e.preventDefault()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="http://google.com" method="get">
  <input name="a" placeholder="Input 1">
  <input name="b" placeholder="Input 2">
  <input name="c" placeholder="Input 3">
  <button type="submit">Submit</button>
</form>

Answer 2

更新

要在离开表格之前提示用户：

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

^{查看此post}

在每个字段上使用required属性，您无需执行所有操作。如果有空白字段，以下演示将拒绝任何提交表单的尝试。它将发送到实时测试服务器，并显示响应以验证提交成功。

演示

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

label {
  display: inline-block;
  width: 75px
}

[type=submit] {
  margin-left: 200px
}

<form id='form' action='http://httpbin.org/post' method='post' target='response'>


  <label>Name: </label><input name='Name' type='text' required><br>
  <label>Cell: </label><input name='Cell' type='tel' required><br>
  <label>Date: </label><input name='Date' type='date' required><br>

  <input type="submit">


</form>
<iframe src='about:blank' name='response'></iframe>

Answer 3

能够使用Bipperty通过此SO问题提出的建议来解决此问题... Narrow Down BeforeUnload To Only Fire If Field Is Changed or Updated。最终，下面的代码是我在提交表单时用于关闭beforeunload的代码。

refresh

提交时禁用AddEventListener

3 个答案:

更新

演示