最近在開發微信小程序遇到一個問題，安卓手機輸入框文字飄出輸入框，但是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);}},使用以上方法會發現小米手機輸入沒有問題，但是華為榮耀手機還是有問題，最后選擇用
?<up-textarea
? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? placeholder="請輸入"
? ? ? ? ? ? ? border="surround"
? ? ? ? ? ? ? v-model="form.number"
? ? ? ? ? ? ? auto-height="false"
? ? ? ? ? ? ></up-textarea>這個組件，auto-height="false"， type="text"就能達到輸入框只有一行的效果
