input.addEventListener('focus', () => bar.classList.add('static'));
input.addEventListener('blur', () => bar.classList.remove('static'));

活动报名页底部固定了一个提交按钮,iPhone 上点最后一个输入框,键盘弹起后按钮跟着页面上移,被键盘完全盖住,收起键盘才恢复。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。

追下去是这么回事:按钮用了固定定位贴底,iOS 弹出键盘时会缩小视觉视口,固定元素跟着视口底部走,而页面没有给输入区留出滚动空间。

「fixed 键盘遮挡」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。监控和日志的时间要对上,时区不一致会多绕很大一圈。

临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

处理上按这个顺序:监听输入框聚焦,聚焦时把按钮改成静态排到表单末尾,失焦再切回固定定位;给表单容器加底部内边距,值等于按钮高度加安全区;在 iPhone 真机上从第一个输入框一路点到最后一个,确认按钮始终可点。

确认没问题再收工,键盘弹起后提交按钮仍在可视区,不用收起键盘就能点到。

作者 9823189