用户离开页面时，如何触发未执行的jQuery change事件处理程序？

可以通过以下两种方式解决这个问题，无需依赖keyup/keydown事件或提交按钮：

方案1：利用beforeunload事件主动校验并保存变更 #

先为每个文本框记录初始值（或上次保存的值），在页面卸载前逐一对比当前值与记录值，发现差异则触发保存逻辑。

// 页面加载时，为每个工时输入框记录初始值
$('.time-input').each(function() {
  $(this).data('saved-value', $(this).val());
});

// 绑定change事件时，更新记录的保存值
$('.time-input').on('change', function() {
  const $input = $(this);
  saveData($input.val()); // 替换成你的实际保存逻辑
  $input.data('saved-value', $input.val());
});

// 页面卸载前检查所有输入框
$(window).on('beforeunload', function() {
  let hasUnsavedChange = false;
  $('.time-input').each(function() {
    const $input = $(this);
    if ($input.val() !== $input.data('saved-value')) {
      saveData($input.val()); // 保存未提交的变更
      hasUnsavedChange = true;
    }
  });
  // 可选：提示用户有未保存内容（部分浏览器会自定义提示文案）
  if (hasUnsavedChange) {
    return '你有未保存的工时数据，确定要离开吗？';
  }
});

// 示例保存函数（根据实际需求修改）
function saveData(value) {
  // 这里写AJAX保存或本地存储逻辑
  console.log('保存数据:', value);
}

方案2：在beforeunload时触发当前聚焦输入框的blur事件 #

因为change事件需要输入框失去焦点才会触发，所以可以在页面卸载前，让当前处于聚焦状态的输入框主动失焦，从而触发绑定的change事件。

$('.time-input').on('change', function() {
  saveData($(this).val()); // 替换成你的实际保存逻辑
});

$(window).on('beforeunload', function() {
  // 获取当前聚焦的元素，如果是目标文本框则触发blur
  const focusedElement = document.activeElement;
  if ($(focusedElement).hasClass('time-input')) {
    $(focusedElement).blur(); // 触发change事件，执行保存
  }
  // 可选：提示用户有未保存内容
  // return '未保存的工时数据将丢失，确定离开？';
});

// 示例保存函数（根据实际需求修改）
function saveData(value) {
  console.log('保存数据:', value);
}

注意事项 #

• beforeunload的提示文案在部分浏览器中会被替换为系统默认内容，无法完全自定义。
• 如果保存逻辑是异步操作，建议确保它能快速完成，部分浏览器会限制beforeunload中的异步执行时长。

内容的提问来源于stack exchange，提问作者dsvick