IE中容器先设为hidden再设为visible后输入框失焦原因咨询

这是个典型的浏览器兼容性差异问题，核心原因在于IE11对visibility: hidden的处理逻辑和现代浏览器（比如Chrome）完全不同：

问题根源 #

• 现代浏览器（如Chrome）的处理逻辑：当元素被设置为visibility: hidden时，仅仅是视觉上不可见，但元素的DOM状态、焦点关联等核心属性都会被完整保留。所以当你把容器恢复为visible后，浏览器能自动找回之前的焦点上下文，input自然保持聚焦状态。
• IE11的特殊处理：IE11会把visibility: hidden的元素（包括其所有子元素）视为“完全脱离交互状态”——设置隐藏的瞬间，浏览器会主动清除容器内所有元素的焦点绑定，并且不会记录之前的焦点状态。哪怕你立刻把容器恢复可见，IE11也不会自动恢复之前的焦点，导致input失焦。

解决方案 #

针对这个问题，最简单的修复方式就是在容器恢复可见后，手动调用focus()方法重新聚焦input：

var containerEl = document.getElementById('container');
var inputEl = document.getElementById('input');

inputEl.focus();
containerEl.style.visibility = 'hidden';
containerEl.style.visibility = 'visible';

// 手动恢复焦点，兼容IE11
inputEl.focus();

如果你担心重复调用focus()会影响其他浏览器（虽然现代浏览器重复调用不会有问题），可以加个IE11的检测逻辑，只在IE11中执行重新聚焦：

// 检测是否为IE11
const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

var containerEl = document.getElementById('container');
var inputEl = document.getElementById('input');

inputEl.focus();
containerEl.style.visibility = 'hidden';
containerEl.style.visibility = 'visible';

// 仅在IE11中重新聚焦
if (isIE11) {
    inputEl.focus();
}

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