iPad与iPhone端blur()事件失效，求移除.body-clip-overflow定位的替代方案

我太懂你这种iOS兼容性问题的糟心了——明明在安卓和桌面端好好的，到了Safari上就掉链子。你遇到的核心问题是iOS Safari中blur事件的触发时机不稳定，经常和键盘收起的动画不同步，甚至有时候直接不触发，导致你的样式重置代码没生效。

下面给你几个改进方案，从调整事件监听方式到增加双重保险，一步步解决问题：

1. 改用focusout事件替代blur #

focusout事件在元素失去焦点时触发，包括子元素的焦点变化，在iOS上的兼容性比blur更稳定。你可以把原代码的blur换成focusout，同时适当延长超时时间（给键盘收起动画留足够缓冲）：

// 聚焦逻辑保持不变
$(document).on('focus', 'input, textarea', function() {
  $('.body-clip-overflow').css('position', 'fixed');
  $('.ui-dialog').css({
    'position': 'absolute',
    'top': '80px'
  });
});

// 改用focusout事件触发重置
$(document).on('focusout', 'input, textarea', function() {
  // 延长超时到200ms，适配iOS键盘收起动画时长
  setTimeout(function() {
    $('.body-clip-overflow').css('position', 'relative');
  }, 200);
});

2. 增加窗口resize监听作为双重保险 #

iOS键盘收起时会触发窗口高度变化，我们可以监听这个变化来触发样式重置，避免focusout事件失效的极端情况：

// 先定义重置样式的复用函数
function resetBodyPosition() {
  $('.body-clip-overflow').css('position', 'relative');
}

// 聚焦逻辑不变
$(document).on('focus', 'input, textarea', function() {
  $('.body-clip-overflow').css('position', 'fixed');
  $('.ui-dialog').css({
    'position': 'absolute',
    'top': '80px'
  });
});

// focusout事件触发重置
$(document).on('focusout', 'input, textarea', function() {
  setTimeout(resetBodyPosition, 200);
});

// 监听窗口resize，处理键盘收起场景
let initialWindowHeight = $(window).height();
$(window).on('resize', function() {
  const currentHeight = $(window).height();
  // 当窗口高度明显增加时，判定为键盘收起
  if (currentHeight - initialWindowHeight > 50) {
    resetBodyPosition();
  }
  initialWindowHeight = currentHeight;
});

3. 额外小技巧：避免重复触发DOM操作 #

如果担心多次触发样式重置造成冗余，可以加个简单的状态判断：

let isBodyFixed = false;

$(document).on('focus', 'input, textarea', function() {
  if (!isBodyFixed) {
    $('.body-clip-overflow').css('position', 'fixed');
    $('.ui-dialog').css({
      'position': 'absolute',
      'top': '80px'
    });
    isBodyFixed = true;
  }
});

function resetBodyPosition() {
  if (isBodyFixed) {
    $('.body-clip-overflow').css('position', 'relative');
    isBodyFixed = false;
  }
}

这样可以减少不必要的DOM操作，同时避免样式反复切换的问题。

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