iOS Safari / iPhone 横竖屏切换后 input 的 'Done' 按钮消失，如何修复？

2026-11-04排障赵师傅

结论

网页端没有公开的 JavaScript 或 CSS 接口能强制恢复 iOS Safari 键盘上方的 Accessory Bar / “Done” 按钮。针对这组复现步骤，也没有足够证据证明某段前端代码可以通用地修复问题。

建议先用最小页面确认问题是否独立于业务代码，再在页面内提供“收起键盘”按钮，让用户有系统 “Done” 以外的操作入口。方向变化时调用 blur() 并不保证恢复工具栏；如果已经验证无效，就不必继续把它当作修复方案。

为什么切换方向后会消失？

Accessory Bar 是浏览器管理的原生输入界面，不属于页面 DOM。WebKit 的 iOS 实现通过原生 inputAccessoryView 等逻辑决定是否显示这层界面，页面无法通过 z-index、display 或重新布局直接控制它。WebKit 实现

“横屏输入、点击 Done、切回竖屏后异常”这一过程，提示浏览器可能在旋转和结束输入时没有正确恢复原生工具栏的状态。这可以作为排查方向，但仅凭复现步骤还无法确定内部原因，也不能认定所有 iPhone 和所有 iOS 版本都有同一个缺陷。

blur() 会移除元素焦点，但不保证重建原生键盘工具栏。因此，即使调用后键盘收起了，下次打开时仍可能没有 “Done”。HTML 焦点管理规范

先确认是否由页面代码触发

创建只包含普通 <input type="text"> 的页面，不加载框架、业务脚本和自定义样式，按原来的七个步骤操作。
如果仍能复现，记录设备型号、完整 iOS 版本、输入法和输入框类型，用来判断受影响范围，避免直接归纳为“所有版本”。
如果最小页面正常，再逐步恢复页面功能。重点检查方向变化时是否替换了输入节点、切换了 type、设置了 disabled / readonly，或者执行了自动聚焦。
在目标设备可用的系统更新上重新验证。只有对应的修复记录或实测结果，才能支持将某个版本认定为修复版本。

如果最小页面也能复现，可以将页面和录屏提交给 WebKit 或 Apple，按浏览器问题继续跟踪。

规避方案：提供页面内的收起入口

对于单个输入框，可以添加一个普通按钮，在用户点击时调用 blur()：

<meta name="viewport" content="width=device-width, initial-scale=1">

<label for="message">内容</label>
<input id="message" type="text" enterkeyhint="done">

<button id="dismiss-keyboard" type="button">收起键盘</button>

<script>
  const input = document.getElementById("message");
  const dismissButton = document.getElementById("dismiss-keyboard");

  dismissButton.addEventListener("click", () => {
    input.blur();
  });
</script>

这里用 blur() 结束当前输入，给用户提供另一个收起键盘的入口。它不会恢复消失的原生 Accessory Bar，收起键盘的效果仍需在受影响设备上验证。

按钮应放在键盘展开后仍能看到或滚动到的位置。如果页面锁定了滚动，或者按钮被键盘遮住，用户就无法使用这个入口。type="button" 可以避免按钮放进表单后意外触发提交。

示例中的 enterkeyhint="done" 只是向浏览器提示虚拟键盘 Enter 键的标签或图标。这个按键与键盘上方工具栏里的 “Done” 位于不同位置，不能用它强制恢复 Accessory Bar，也不能保证所有键盘布局都出现相同按键。HTML enterkeyhint 规范

注意事项

反复执行 blur() / focus()、增加固定延时，或克隆替换 input，都不能作为通用修复。这些操作不保证重置原生工具栏，还可能影响光标位置、输入法组合输入和页面滚动。

也不建议在每次 resize 时都让输入框失焦。移动端键盘的展开和收起本身就可能引起视口变化，这样处理容易打断正常输入。

如果业务允许用户保持竖屏，可以提示受影响用户暂时避免旋转，作为临时规避方式。页面仍应保留可用的结束输入入口，并在目标设备上验证完整操作流程。