如何为表单（而非表单元素）绑定jQuery .blur()事件？

这个问题确实挺头疼的——单独给每个表单字段绑定blur事件，总会在用户还没填完所有必填项时就弹出错误提示，体验很差。要实现表单自身失去焦点时才触发验证，我们可以通过以下两种思路解决：

方法一：让表单成为可聚焦元素，监听其blur事件 #

表单默认不是可聚焦元素，所以我们需要给它添加tabindex属性，让它能获取焦点，之后就能监听它的blur事件了。同时要注意区分“用户在表单内切换元素”和“完全离开表单”两种情况：

$(document).ready(function() {
  // 选中目标表单
  const targetForm = $('#your-form-id');
  // 添加tabindex=-1：让表单可聚焦，但不会被Tab键选中，不影响正常导航
  targetForm.attr('tabindex', '-1');

  // 监听表单的blur事件
  targetForm.on('blur', function() {
    // 加个100ms延迟，确保document.activeElement已经更新到最新焦点元素
    setTimeout(() => {
      // 判断当前焦点是否还在表单内部
      const isFocusInsideForm = targetForm.has(document.activeElement).length > 0;
      if (!isFocusInsideForm) {
        // 这里执行你的验证逻辑：检查两个字段是否都已更新
        const field1Value = $('#field-1').val().trim();
        const field2Value = $('#field-2').val().trim();

        if (field1Value && field2Value) {
          // 两个字段都已填写，执行验证或提交逻辑
          console.log('所有字段已更新，验证通过');
          // targetForm.submit(); // 如需直接提交表单，取消注释这行
        } else if (field1Value || field2Value) {
          // 仅填写了部分字段，提示用户补全，而非误报错误
          console.log('请补全所有必填字段');
        }
        // 若两个字段都未填写，无需任何提示
      }
    }, 100);
  });

  // 可选：点击表单区域时自动让表单获取焦点，确保后续离开时能触发blur
  targetForm.on('click', function() {
    targetForm.focus();
  });
});

方法二：监听全局焦点变化，判断是否离开表单 #

如果不想给表单加tabindex，可以通过监听表单内元素的focus和全局的focus事件，来判断用户是否完全离开了表单：

$(document).ready(function() {
  let isFormInFocus = false;
  const targetForm = $('#your-form-id');

  // 当表单内的元素获得焦点时，标记表单处于聚焦状态
  targetForm.on('focus', 'input, select, textarea', function() {
    isFormInFocus = true;
  });

  // 监听全局焦点变化
  $(document).on('focus', function(e) {
    // 如果之前表单处于聚焦状态，且当前焦点不在表单内
    if (isFormInFocus && !targetForm.has(e.target).length) {
      // 执行验证逻辑
      const field1Value = $('#field-1').val().trim();
      const field2Value = $('#field-2').val().trim();

      if (field1Value && field2Value) {
        console.log('验证通过，可提交表单');
      } else if (field1Value || field2Value) {
        console.log('请完成所有必填字段的填写');
      }
      // 重置表单聚焦状态
      isFormInFocus = false;
    }
  });
});

核心注意点 #

• 无论哪种方法，都要避免在表单内元素切换时误触发验证，所以必须判断焦点是否还在表单内部
• 第一种方法的tabindex=-1不会干扰用户的正常Tab导航，放心使用
• 第二种方法更适合不想修改表单属性的场景，逻辑也相对清晰

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