HTML页面加载后，如何在手机端自动唤起系统软键盘？

这个问题我做移动端H5项目时可太有发言权了！浏览器为了防止恶意自动唤起软键盘打扰用户，加了一堆限制，普通的.focus()、.click()确实经常不管用，给你几个实测有效的方案，分场景说：

1. Android端直接唤起方案 #

Android对自动唤起的限制没iOS那么严，页面加载完成后稍作延迟再触发focus，大部分浏览器（Chrome、华为浏览器等）都能生效：

document.addEventListener('DOMContentLoaded', function() {
  // 找到页面第一个输入框
  const firstInput = document.querySelector('input[type="text"]:first-of-type');
  if (!firstInput) return;

  // 先执行一次focus，再延迟100ms补一次（有些浏览器需要渲染时间）
  firstInput.focus();
  setTimeout(() => {
    // 设置光标到末尾，提升输入体验
    firstInput.setSelectionRange(firstInput.value.length, firstInput.value.length);
  }, 100);
});

2. iOS Safari端近似自动唤起方案 #

iOS的限制非常严格——必须是用户主动触发的交互（比如触摸、点击）才能唤起软键盘，纯页面加载后自动触发几乎不可能。但可以用个小技巧：监听页面的第一次触摸事件（用户打开页面后大概率会碰屏幕），这时自动唤起键盘，体验上接近“自动”：

let keyboardAlreadyTriggered = false;
document.addEventListener('touchstart', function triggerKeyboard() {
  if (keyboardAlreadyTriggered) return;
  
  const firstInput = document.querySelector('input[type="text"]:first-of-type');
  if (firstInput) {
    firstInput.focus();
    keyboardAlreadyTriggered = true;
    // 只触发一次，避免重复唤起
    document.removeEventListener('touchstart', triggerKeyboard);
  }
}, { passive: true });

3. 跨端兼容终极写法 #

把上面两种方案结合，再给输入框加上autofocus属性做辅助（虽然这个属性在移动端偶尔失效，但聊胜于无）：

首先给第一个输入框加属性：

<input type="text" autofocus placeholder="请输入内容">

然后JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const targetInput = document.querySelector('input[autofocus], input[type="text"]:first-of-type');
  if (!targetInput) return;

  // 初始focus尝试
  targetInput.focus();

  // Android延迟兜底
  setTimeout(() => {
    targetInput.focus();
    targetInput.setSelectionRange(targetInput.value.length, targetInput.value.length);
  }, 200);

  // iOS触摸触发兜底
  let hasTriggered = false;
  const handleTouch = () => {
    if (hasTriggered) return;
    targetInput.focus();
    hasTriggered = true;
    document.removeEventListener('touchstart', handleTouch);
  };
  document.addEventListener('touchstart', handleTouch, { passive: true });
});

额外注意事项 #

• 尽量用DOMContentLoaded而不是window.onload，前者在DOM渲染完成就触发，时机更早，体验更好；
• 如果是APP内嵌的WebView页面，最可靠的方式是让原生开发配合：在WebView加载完成后调用原生API直接唤起软键盘，完全不受浏览器限制；
• 部分浏览器在隐私模式、用户手动关闭过软键盘的情况下，任何自动唤起方案都可能失效，这时候只能引导用户手动点击输入框。

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