页面加载时聚焦HTML表单首个输入框，移动端如何隐藏软键盘？

这个问题的核心是平衡桌面端的便捷性和移动端的体验——桌面用户希望直接开始输入，而移动端自动弹出的软键盘会遮挡界面，影响操作。下面是我推荐的解决方案：

核心思路 #

移除HTML原生的autofocus属性，改用JavaScript根据设备类型动态控制输入框的聚焦行为：

• 桌面设备：页面加载完成后主动聚焦输入框
• 移动设备：不自动聚焦，让用户点击输入框时再唤起软键盘（浏览器默认会处理这个行为）

具体实现 #

1. 调整HTML结构 #

先去掉输入框的autofocus属性，把控制权交给JS：

<input type="text" id="primary-input" placeholder="请输入内容..." />

2. 编写JavaScript逻辑 #

通过检测触摸支持和屏幕宽度来区分设备，然后执行对应的聚焦操作：

document.addEventListener('DOMContentLoaded', function() {
  const targetInput = document.getElementById('primary-input');
  
  // 判断是否为桌面设备：优先检测触摸支持，再结合屏幕宽度兜底
  const isDesktop = !('ontouchstart' in window) || window.matchMedia('(min-width: 768px)').matches;
  
  if (isDesktop) {
    // 桌面端自动聚焦，用户可以直接输入
    targetInput.focus();
  }
  // 移动端无需额外操作：用户点击输入框时，浏览器会自动唤起软键盘
});

为什么这个方案有效？ #

• 避免原生autofocus的移动端问题：原生autofocus在移动浏览器中会强制弹出软键盘，这是浏览器的默认行为，无法通过CSS阻止
• 设备检测更准确：结合触摸事件支持和媒体查询，比单一检测屏幕宽度更可靠（比如避免把大屏平板误判为桌面设备）
• 无不良体验：不会出现键盘弹出后又收起的闪烁情况，比“先autofocus再blur”的方案更流畅

可选优化：处理特殊场景 #

如果需要支持外接键盘的移动设备（比如平板接键盘），可以额外检测键盘输入事件，但这种场景占比极低，大部分情况下上面的方案已经足够。

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