iOS端WebKit中setTimeout延迟唤起输入框键盘失效问题求助

问题分析 #

iOS Safari（基于WebKit内核）对用户交互触发的焦点操作有严格的安全限制：只有在用户直接触发的同步事件回调（如mousedown/touchstart）中调用focus()，才会自动唤起键盘。异步回调（如setTimeout、Promise.then）中执行的focus()仅会设置输入框的焦点状态，但不会触发键盘唤起——这是WebKit为防止恶意自动弹窗设计的机制。

你的代码中，e.preventDefault()阻止了输入框默认的同步焦点行为，转而在setTimeout异步回调中调用focus()，正好触发了上述限制。iOS 15版本可能存在临时的机制宽松，因此可以正常运行，但后续iOS版本收紧了规则，导致问题出现。

解决方案 #

根据业务需求，可选择以下几种可行方案：

方案1：调整业务逻辑，移除延迟（兼容性最佳） #

如果业务允许，直接在用户交互的同步流程中调用focus()，完全符合WebKit安全规则：

function delayedFocus(e) {
    e.target.focus();
}

方案2：保留延迟逻辑，建立交互信任链 #

若必须保留1秒延迟，可在用户触发的同步事件中先短暂触发一次焦点操作，让WebKit认可后续异步操作的合法性：

function delayedFocus(e) {
    e.preventDefault();
    const target = e.target;
    // 同步触发焦点，建立用户交互上下文
    target.focus();
    // 立即取消焦点，避免提前唤起键盘
    target.blur();
    // 延迟1秒后唤起焦点与键盘
    setTimeout(() => {
        target.focus();
    }, 1000);
}

方案3：改用原生触摸事件增强可靠性 #

iOS上的mousedown是模拟事件，改用原生touchstart事件并兼容鼠标事件，可提升触发的稳定性：

<input type="text" id="testtext" ontouchstart="delayedFocus(event)" onmousedown="delayedFocus(event)">

函数逻辑同方案2即可。

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