Angular PWA安卓端问题：键盘开启时点击textarea文本丢失焦点

问题现象 #

• 在安卓端PWA的<textarea>组件中输入或选中文本时，触摸文本会触发键盘意外关闭
• 页面错误将此次触摸识别为点击了键盘未显示时对应位置的页面元素，严重干扰编辑流程
• iOS端无此问题，运行完全正常

已尝试的排查步骤 #

• 阻止<textarea>内部的touch事件冒泡，但问题仍未解决

可能的解决思路与方案 #

1. 处理视口调整与元素位置偏移 #

安卓键盘弹出时会改变视口高度，部分使用position: fixed/absolute的元素可能未实时更新位置，导致触摸事件被错位元素捕获：

• 监听resize和visualViewport变化事件，实时调整布局：

window.visualViewport.addEventListener('resize', () => {
  const textarea = document.querySelector('textarea');
  if (textarea) {
    // 根据视口偏移修正元素位置，避免被错位元素拦截事件
    textarea.style.bottom = `${window.visualViewport.offsetHeight - window.innerHeight}px`;
  }
});

• 暂时移除键盘弹出区域内的可点击元素，减少误触概率

2. 修正触摸事件的坐标判断 #

键盘弹出后视口偏移，触摸坐标可能未被正确转换，导致事件被原位置元素接收：

document.querySelector('textarea').addEventListener('touchstart', (e) => {
  const rect = e.target.getBoundingClientRect();
  const touchX = e.touches[0].clientX - rect.left;
  const touchY = e.touches[0].clientY - rect.top;
  // 验证触摸点是否在textarea范围内，是则阻止事件扩散
  if (touchX >= 0 && touchX <= rect.width && touchY >= 0 && touchY <= rect.height) {
    e.stopPropagation();
  }
}, { passive: false });

3. 调整PWA显示模式与视口设置 #

检查manifest.json的display属性，避免使用fullscreen模式（部分安卓设备该模式下视口处理存在bug），改用standalone或minimal-ui：

{
  "display": "standalone"
}

同时确保视口meta标签配置正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">

4. 禁用不必要的触摸行为优化 #

给<textarea>添加样式，禁用浏览器默认的触摸延迟与行为：

textarea {
  touch-action: manipulation;
}

排查页面全局的touch/click事件监听，尤其是全屏元素的绑定，暂时移除后测试是否恢复正常

5. 测试不同安卓环境 #

该问题可能与特定浏览器或PWA安装方式有关：

• 在不同安卓浏览器（Chrome、Edge等）中测试网页版，对比PWA安装后的差异
• 将浏览器更新到最新版本，旧版本可能存在键盘与视口交互的已知bug

如果你有其他有效的解决方法，欢迎补充分享！

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