Chrome for Android点击HTML input输入框被键盘遮挡问题求助

解决方案 #

安卓端Webview软键盘弹出时仅会调整视口高度，不会自动重定位fixed元素，也不会主动滚动内容让聚焦的输入框可见，所以会出现遮挡问题，iOS系统自带了这部分交互处理所以无异常。以下方案不会修改原有内容高度，可直接复用现有布局：

1. 新增交互逻辑 #

在页面原有JS代码中添加如下代码：

// 仅针对安卓设备生效，不影响iOS原有交互
const isAndroid = /Android/i.test(navigator.userAgent);
if (isAndroid) {
  const targetInput = document.querySelector('input[type="number"]');
  const bottomBanner = document.querySelector('.bottom-banner');
  
  targetInput.addEventListener('focus', () => {
    // 软键盘弹出时将底部横幅向上偏移自身高度，避免和软键盘叠加遮挡输入框
    bottomBanner.style.transform = 'translateY(-100%)';
    // 主动滚动内容，让输入框居中显示在可视区域
    targetInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });
  
  targetInput.addEventListener('blur', () => {
    // 输入框失焦后恢复底部横幅原有位置
    bottomBanner.style.transform = 'translateY(0)';
  });

  // 可选：适配不同设备的软键盘高度变化
  window.addEventListener('resize', () => {
    if (document.activeElement === targetInput) {
      targetInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
}

2. 可选CSS优化 #

给底部横幅添加过渡动画，让位置切换更流畅，同时修复宽度溢出问题：

.bottom-banner {
  /* 原有属性保持不变，新增以下属性 */
  transition: transform 0.2s ease;
  box-sizing: border-box;
}

方案说明 #

• 完全保留原有内容高度，仅在输入框聚焦时临时调整底部横幅的渲染位置，失焦后立即恢复原状
• 仅对安卓设备生效，不会修改iOS端原有的正常交互逻辑
• 如果页面存在多个输入框，将选择器替换为所有输入框的通用选择器即可批量适配

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