如何移除Android Chrome虚拟键盘建议栏或避免布局重叠？

一、移除虚拟键盘建议栏 #

给输入框添加组合属性，直接禁用自动补全、拼写建议和大小写自动修正：

<input 
  type="text" 
  autocomplete="new-password" 
  autocorrect="off" 
  autocapitalize="off"
  spellcheck="false"
>

• autocomplete="new-password"：比单纯的autocomplete="off"更可靠，部分Chrome版本会忽略普通的off设置；
• spellcheck="false"：关闭拼写检查提示；
• autocorrect="off"：禁用自动修正建议；
• autocapitalize="off"：关闭输入自动大写逻辑。

二、调整布局避免按钮被遮挡 #

如果无法完全移除建议栏，通过动态适配确保按钮始终可见：

1. 监听视觉视口变化调整底部空间 #

Chrome中虚拟键盘弹出时会改变visualViewport的尺寸，可通过监听该事件计算键盘高度，动态调整页面底部内边距：

const visualViewport = window.visualViewport;
const bottomButtonContainer = document.getElementById('bottom-button-container');

function adjustForKeyboard() {
  // 计算键盘（含建议栏）高度：屏幕高度 - 视觉视口高度
  const keyboardHeight = window.innerHeight - visualViewport.height;
  // 给按钮容器添加底部内边距，留出足够空间
  bottomButtonContainer.style.paddingBottom = `${keyboardHeight}px`;
}

// 监听视口尺寸变化
visualViewport.addEventListener('resize', adjustForKeyboard);
// 初始加载时执行一次适配
adjustForKeyboard();

2. 正确使用CSS环境变量env(keyboard-inset-height) #

首先确保viewport meta标签包含viewport-fit=cover，否则环境变量可能不生效：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

然后给固定定位的按钮容器添加内边距：

.bottom-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(keyboard-inset-height, 0px);
}

注意：该属性仅支持较新版本的Chrome，若需兼容旧版本，建议结合上面的JavaScript监听方案。

三、额外注意事项 #

• 检查PWA的manifest配置，确保display属性设置为standalone或fullscreen，这会影响Chrome对虚拟键盘的处理逻辑；
• 测试不同Android版本的Chrome，部分旧版本可能存在行为差异，需针对性调整。

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