轻松一招，解决苹果和安卓 input 输入框遮挡问题！

Android

2023-07-19 02:25:40

对于前端开发者来说，确保应用程序界面的用户体验至关重要。尤其在移动设备上，当用户点击输入框时，系统默认弹出的软键盘可能会导致其他内容被遮盖，特别是苹果和安卓设备对这种问题的表现差异较大，造成一致性的困扰。

为何会出现输入框被遮挡的问题

在开发过程中，开发者常常会遇到这样一个场景：用户在一个表单中填写信息。当焦点位于某一个输入框时，软键盘弹出可能就会把其他内容给遮住，影响了用户体验。这种现象在苹果和安卓设备上表现得尤为明显，主要由于两者对界面元素的处理方式不同。

解决方案与实现

使用uniapp的解决方案

Uniapp作为一款跨平台开发框架，提供了便捷的方法来解决上述问题。通过配置page-meta标签内的参数，可以有效地控制页面滚动和输入框被遮挡的问题。

步骤一：设置 `page-meta`

在vue文件中引入page-meta并设置相关属性：

<template>
  <view class="content">
    <input type="text" placeholder="请输入内容"/>
  </view>
</template>

<script>
export default {
  pageMeta: {
    enablePullDownRefresh: false,
    enableBackButton: true,
    keyboardHeightAdjust: 'auto' // 关键属性，用于调整键盘高度
  }
}
</script>

这里，keyboardHeightAdjust: 'auto' 是关键设置。它允许页面根据软键盘的高度自动调整布局，使得输入框不会被遮挡。

步骤二：适配不同设备

尽管uniapp框架提供了一定程度上的跨平台兼容性支持，但开发者仍需在实际项目中测试并微调这些配置，确保不同操作系统和设备上的效果一致。可以通过监听键盘弹出事件来动态调整页面布局或滚动位置。

<template>
  <view class="content" @keyboardheightchange="onKeyboardHeightChange">
    <input type="text" placeholder="请输入内容"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyboardHeight: 0
    }
  },
  methods: {
    onKeyboardHeightChange(event) {
      this.keyboardHeight = event.detail.height;
      // 根据键盘高度动态调整页面布局或滚动位置
      if (this.keyboardHeight > 0) {
        // 软键盘弹出，执行相应处理逻辑
      } else {
        // 键盘收回，恢复原状
      }
    }
  }
}
</script>