uni-app ios下第一次进入输入框时输入框被软键盘遮挡 关闭后再进入则不会

uni-app ios下第一次进入输入框时输入框被软键盘遮挡 关闭后再进入则不会

操作步骤：

ios下第一次聚焦输入框，输入框会被软键盘遮挡，然后关闭软键盘之后在聚焦输入框就不会被软键盘遮挡了

预期结果：

预期结果我进入页面第一次聚焦输入框 输入框也不应该被软键盘遮挡

实际结果：

ios下第一次聚焦输入框，输入框会被软键盘遮挡，然后关闭软键盘之后在聚焦输入框就不会被软键盘遮挡了

bug描述：

<input cursor-spacing="10" :value="inputWord" class="input" type="text" @input="inputChange" @confirm="confirm" placeholder="不方便语音？输入想说的话试试">

ios下第一次聚焦输入框，输入框会被软键盘遮挡，然后关闭软键盘之后在聚焦输入框就不会被软键盘遮挡了，代码没有什么东西，解决方案可以设置adjustResize，但是会出现另外一个问题，所以我想问如果不加adjustResize，怎么去解决这种情况

附件

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 window10
HBuilderX类型 正式
HBuilderX版本 3.1.18
手机系统 iOS
手机系统版本 IOS 14
手机厂商 苹果
手机机型 苹果12 系统14.3
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app ios下第一次进入输入框时输入框被软键盘遮挡 关闭后再进入则不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

加adjustResize 则是没有顶起内容，我希望的是顶起内容 所以暂时没有加adjustResize 官方给的文档如下，但实际上我是ios才会出现这种情况 adjust-position Boolean true 键盘弹起时，是否自动上推页面 App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序

更多关于uni-app ios下第一次进入输入框时输入框被软键盘遮挡 关闭后再进入则不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html


上传一个完整的示例工程吧

这是一个iOS平台下常见的软键盘遮挡问题，主要原因是首次聚焦时页面布局计算不准确。

建议的解决方案：

  1. 使用uni.pageScrollTo手动滚动
onFocus() {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
  }, 100)
}
  1. 调整输入框位置 给输入框添加cursor-spacing属性，设置较大的间距值：
<input cursor-spacing="100" ...>
  1. 监听键盘高度变化
onLoad() {
  uni.onKeyboardHeightChange(res => {
    if (res.height > 0) {
      // 键盘弹出时调整布局
    }
  })
}
  1. 使用focus事件延迟处理
onFocus() {
  setTimeout(() => {
    this.$refs.input.scrollIntoView()
  }, 300)
}
回到顶部