移动端浏览器调用focus()无法唤起软键盘的解决方案咨询

问题原因 #

移动端浏览器出于用户体验和防骚扰考虑，仅允许由用户主动交互（如点击、触摸）触发的focus()操作自动唤起软键盘。DOMContentLoaded属于页面加载事件，不属于用户主动交互范畴，因此调用input.focus()只会选中输入框并显示光标，无法触发软键盘弹出。

解决方案 #

1. 绑定用户首次交互触发（最可靠方案）

监听页面的touchstart或click事件，在用户首次触摸/点击页面时执行focus()操作，这是浏览器认可的合法触发路径：

const input = document.getElementById("input");

// 仅执行一次的聚焦触发函数
function triggerInputFocus() {
  input.focus();
  // 移除事件监听，避免重复触发
  document.removeEventListener('touchstart', triggerInputFocus);
  document.removeEventListener('click', triggerInputFocus);
}

// 同时监听触摸和点击事件，兼容不同设备
document.addEventListener('touchstart', triggerInputFocus);
document.addEventListener('click', triggerInputFocus);

2. 配合autofocus属性辅助优化

给输入框添加autofocus属性，部分浏览器在用户交互后会强化聚焦效果，但单独使用仍可能无法唤起键盘，建议和上述交互触发方式配合使用：

<input type="text" id="input" autofocus />

注意事项 #

• 不要尝试用setTimeout延迟执行focus()，现代移动端浏览器会识别这种非交互触发的操作，依然拦截键盘唤起。
• 确保输入框处于可见状态（display不为none、visibility不为hidden），隐藏状态的输入框无法触发键盘唤起。

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