微信小程序安卓手机输入框文字飘出输入框
最近在开发微信小程序遇到一个问题，安卓手机输入框文字飘出输入框，但是ios系统的手机则正常。
使用情景：做了一个弹窗，弹窗内是表单，需要填写一些信息，但是在填写信息时光标不显示，输入的内容飘到上方去了。
探究原因：
-
键盘弹出机制差异：
- iOS：键盘弹出时整个页面平滑上移
- 安卓：键盘直接覆盖页面内容，不调整页面布局
-
布局计算错误：
- 安卓键盘弹出时页面高度被压缩，导致相对定位元素位置计算错误
-
滚动位置管理：
- 安卓系统不会自动滚动到输入框位置
解决方案：为组件设置@focus="handleInputFocus" @blur="handleInputBlur"，安卓系统下，键盘弹出时滚动到输入框位置，键盘收起时恢复滚动位置
// 新增: 处理输入框聚焦事件handleInputFocus() {console.log("Input focused");if (this.isAndroid) {// 安卓系统下，键盘弹出时滚动到输入框位置setTimeout(() => {const query = uni.createSelectorQuery().in(this);query.select(".row_content").boundingClientRect((data) => {uni.pageScrollTo({scrollTop: data.top,duration: 300,});}).exec();}, 300);}},// 新增: 处理输入框失焦事件handleInputBlur() {console.log("Input blurred");if (this.isAndroid) {// 安卓系统下，键盘收起时恢复滚动位置setTimeout(() => {uni.pageScrollTo({scrollBottom: 0,duration: 300,});}, 300);}},