移动端KeyMaster键盘测试器虚拟键盘无法弹出问题求助

问题核心原因 #

移动端浏览器对视口外或完全不可见的输入元素有严格的焦点限制，你当前设置top: -100px会让input处于视口外，多数移动端浏览器会阻止这类元素获取焦点以弹出虚拟键盘，这是出于交互合理性的限制。

具体修复方案 #

1. 调整隐藏input的样式

将input设置为视觉不可见但仍处于视口内，避免被浏览器判定为非交互元素：

<input type="text" id="hiddenInput" style="position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1;" />

• opacity: 0：视觉隐藏元素
• width/height:1px：保留元素在视口内的占位
• pointer-events: none：避免干扰页面其他交互
• z-index: -1：确保不会覆盖其他页面元素

2. 优化焦点触发逻辑

针对部分Android浏览器的兼容性问题，在touchstart事件中补充click触发，确保焦点能正确获取：

document.body.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 阻止默认触摸行为，防止页面滚动等干扰
  hiddenInput.focus();
  hiddenInput.click(); // 兼容部分Android浏览器的焦点触发逻辑
});

3. 替代方案：使用contenteditable元素

如果input方案仍不生效，可以尝试用全屏透明的contenteditable元素替代：

<div id="hiddenEditable" contenteditable="true" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: auto;"></div>

const hiddenEditable = document.getElementById('hiddenEditable');

document.body.addEventListener('touchstart', function() {
  hiddenEditable.focus();
});

// 原keydown监听逻辑保持不变

额外注意事项 #

• 确保所有焦点触发操作都来自真实的用户交互（比如touchstart、click），浏览器会阻止非用户触发的焦点请求
• 测试时使用真实移动端设备或Chrome DevTools的设备模拟器，部分简易模拟器可能存在兼容性偏差

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