uniapp: IOS微信小程序输入框部分被软键盘遮挡问题

一、问题描述

在IOS微信小程序中输入框底部被软键盘遮挡：

二、解决方案

小程序输入框被软键盘遮挡一部分的问题可以通过以下几种方法解决‌：

‌1.使用cursorSpacing属性‌ ：在input或textarea元素上添加cursorSpacing属性，并设置一个合适的值（如20），这样可以留出光标到软键盘的距离，避免输入框被遮挡‌。

‌2.动态调整输入框位置‌：

‌(1)获取键盘高度‌：给输入框添加keyboardheightchange事件，通过事件获取键盘的高度。例如：

keyboardheightchange(event) {
  let height = event.detail.height || 0;
  this.keyBoardHeight = height 
}

(2)调整输入框位置‌：根据获取到的键盘高度动态调整输入框的位置。例如，将发送消息的盒子设置为固定位置，并动态调整其bottom值：

<div class="send-msg" :style="{bottom: keyBoardHeight +'px'}">
  <textarea @keyboardheightchange="keyboardheightchange"></textarea>
</div >

注意：

（1）使用fixed属性‌：在弹窗定位中时需要加入fixed属性，否则在软键盘弹出时输入框可能不会显示在软键盘上面‌。

‌（2）处理安全区域‌：在iPhone X等有底部安全区域的设备上，可能需要特别处理安全区域。例如，在u-popup组件中设置safeAreaInsetBottom为false，以确保输入框在软键盘弹出时不会被遮挡‌。