页面跳转限制：需填写至少一个输入框才可离开（JS代码失效求助）

看起来你的需求是用户在关闭、刷新页面或者导航到其他页面时，必须确保至少填写了一个输入框，否则阻止离开并给出提示。之前的JS代码没生效，大概率是事件绑定或者检查逻辑出了问题，我来给你一个可行的实现方案：

第一步：编写输入检查逻辑 #

先写一个函数，用来判断是否有任意一个输入框已经填写了内容：

function hasAnyInputFilled() {
  // 选择你表单里的所有输入控件（可根据实际情况调整选择器，比如包含下拉框、单选框等）
  const inputElements = document.querySelectorAll('#searchForm input[type="text"], #searchForm input[type="email"], #searchForm select');
  
  // 遍历所有输入框，只要有一个非空就返回true
  for (const input of inputElements) {
    if (input.value.trim() !== '') {
      return true;
    }
  }
  return false;
}

第二步：绑定页面离开事件 #

接下来监听beforeunload事件，这个事件会在用户试图离开页面时触发：

// 把事件处理函数单独命名，方便后续移除
function handleBeforeUnload(e) {
  if (!hasAnyInputFilled()) {
    // 注意：现代浏览器会替换自定义提示文本为系统默认内容，但阻止离开的逻辑是有效的
    const warningMessage = 'You haven\'t filled any input fields. Are you sure you want to leave?';
    
    e.preventDefault();
    e.returnValue = warningMessage; // 兼容旧版浏览器
    return warningMessage;
  }
}

// 绑定事件
window.addEventListener('beforeunload', handleBeforeUnload);

第三步：处理表单提交的特殊情况 #

如果用户是通过提交表单离开页面，我们不应该触发提示，所以需要在表单提交时移除事件监听：

document.getElementById('searchForm').addEventListener('submit', function() {
  window.removeEventListener('beforeunload', handleBeforeUnload);
});

注意事项 #

• 自定义提示文本限制：Chrome、Firefox等现代浏览器不再允许自定义beforeunload的提示文本，会显示浏览器自带的提示，但阻止用户离开的逻辑正常工作。
• 选择器准确性：确保querySelectorAll的选择器能覆盖你所有需要检查的输入控件，比如如果有复选框，需要额外判断是否被选中。
• 代码执行时机：确保JS代码在DOM加载完成后执行，可以把代码放在DOMContentLoaded事件里，或者放在页面底部（保证表单和输入框已经渲染）：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的所有JS代码放在这里
});

这样调整后，就能实现你需要的功能——用户没填任何输入框就想离开页面时，会被阻止并收到提示。

内容的提问来源于stack exchange，提问作者R.S Mohan Aravind