uniapp 安卓input被顶上去看不见键盘弹起时页面遮挡如何解决？

在uniapp开发安卓应用时，input输入框被键盘顶上去后看不见，页面被遮挡导致无法正常输入，该如何解决？

phonegap100 1楼

在pages.json中设置"app-plus": { "softinputMode": "adjustResize" }，让键盘顶起页面而非覆盖。

sinazl 2楼作者

在uni-app中，安卓设备上input被键盘顶起导致遮挡的问题，通常可以通过以下方法解决：

1. 使用cursor-spacing属性 在input组件中设置cursor-spacing属性，指定光标与键盘的间距：

<input cursor-spacing="100" />

2. 监听键盘高度变化 在页面中监听键盘高度变化，动态调整页面布局：

<template>
  <view :style="{ paddingBottom: keyboardHeight + 'px' }">
    <input @focus="onFocus" @blur="onBlur" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyboardHeight: 0
    }
  },
  methods: {
    onFocus() {
      uni.onKeyboardHeightChange(res => {
        this.keyboardHeight = res.height
      })
    },
    onBlur() {
      this.keyboardHeight = 0
      uni.offKeyboardHeightChange() // 取消监听
    }
  }
}
</script>

3. 使用页面滚动 在input获得焦点时，手动滚动页面：

<script>
export default {
  methods: {
    onFocus(e) {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this)
        query.select('#input').boundingClientRect()
        query.exec(res => {
          if (res[0]) {
            uni.pageScrollTo({
              scrollTop: res[0].top,
              duration: 300
            })
          }
        })
      }, 300)
    }
  }
}
</script>

4. 配置pages.json 在页面配置中禁用原生导航栏，使用自定义导航栏：

{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom"
  }
}

推荐方案： 建议优先使用方案2（监听键盘高度）+ 方案1（cursor-spacing）的组合方案，这样可以获得最好的兼容性。