IOS 16.1.2下Telegram WebView键盘覆盖input/textarea问题求助

问题场景 #

在iOS 16.1.2系统、Telegram 9.3.2版本的WebView环境中，底部定位的<textarea>会被弹出的键盘完全覆盖，常规的布局调整（flex布局、修改position属性）、interactive widget=resizes-content设置、监听可视区域高度等方案均无效。

针对性解决方案 #

由于Telegram WebView对iOS键盘事件的处理存在特殊性，需要结合CSS布局调整+JavaScript键盘事件监听来解决：

1. 调整基础CSS布局

将.chat改为flex布局，确保输入框始终处于容器底部，同时给容器添加overflow: auto保证内容可滚动：

.chat {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  overflow: auto;
}

.chat textarea {
  align-self: center;
  width: calc(100% - 30px);
  height: 100px;
  margin: 15px 0;
  padding: 6px 50px 6px 6px;
  border: none;
  border-radius: 8px;
  background-color: rgb(35, 35, 35);
  outline: none;
  font-size: 20px;
  resize: none;
  z-index: 1;
}

2. 监听iOS键盘事件动态调整容器底部间距

iOS键盘弹出时会触发visualViewport的变化，同时配合输入框的focus/blur事件，动态给.chat添加底部内边距：

const chatContainer = document.querySelector('.chat');
const textarea = document.querySelector('.chat textarea');

// 监听可视区域变化，实时计算键盘高度
window.visualViewport.addEventListener('resize', () => {
  const keyboardHeight = window.innerHeight - window.visualViewport.height;
  chatContainer.style.paddingBottom = keyboardHeight > 0 ? `${keyboardHeight + 15}px` : '15px';
});

// 聚焦时延迟触发调整，避免键盘未完全弹出导致计算偏差
textarea.addEventListener('focus', () => {
  setTimeout(() => {
    const keyboardHeight = window.innerHeight - window.visualViewport.height;
    chatContainer.style.paddingBottom = `${keyboardHeight + 15}px`;
  }, 100);
});

// 失焦时恢复默认间距
textarea.addEventListener('blur', () => {
  chatContainer.style.paddingBottom = '15px';
});

3. 确保viewport meta标签配置正确

在HTML头部添加正确的viewport设置，保证WebView能正确响应可视区域变化：

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

关键说明 #

Telegram的WebView会对页面resize事件做特殊拦截，仅通过CSS无法完全适配键盘弹出逻辑，必须结合visualViewport的监听实时计算键盘高度，动态调整容器底部间距，才能确保输入框始终处于键盘上方。

内容的提问来源于stack exchange，提问作者Bodya Save Dev