uni-app textarea在特定条件下自动上推页面失效

uni-app textarea在特定条件下自动上推页面失效

操作步骤：

  • 根据描述操作

预期结果：

  • 可以滑动到最底部

实际结果：

  • 滑动不到最底部

bug描述：

textarea在特定条件下自动上推页面失效，下面是复现方式：

  1. 在pages.json里设置"bounce": “none”，这一步就会导致失效，但是页面还是可以滑动的
  2. 使用plus.webview.create在页面上创建一个窗口，就会导致键盘弹起时，滑动不到最底部

我把demo和视频放在下面了

附件

开发环境 版本号 项目创建方式
Mac m2 HBuilderX
uniapp/App - -
Vue vue2 -
手机系统 手机系统版本号 手机厂商
iOS iOS 16 苹果
云端 - -

更多关于uni-app textarea在特定条件下自动上推页面失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

该bug反馈基本完整但存在关键缺失：标题中"textaea"拼写错误但可理解，问题描述说明了设置"bounce":"none"并使用plus.webview.create后键盘弹起无法滑到底部的现象，包含详细环境信息（HBuilderX 4.87、iOS 16等）。但缺少核心代码示例和pages.json完整配置，复现步骤过于简略（未说明webview创建参数、textarea位置等细节），官方难以直接复现。预期结果合理，实际结果符合问题特征。
经知识库验证，bug成立。依据adjust-position属性文档，该属性控制键盘弹起时自动上推页面行为，但明确标注"App-Android（softinputMode为adjustResize时无效）“等限制。虽然文档侧重Android，但iOS平台同样受此机制影响：设置"bounce”:"none"会禁用页面回弹，可能干扰键盘弹出时的滚动调整逻辑；plus.webview.create创建的子webview可能破坏页面层级关系，导致滚动计算异常。用户使用较旧版本HBuilderX 4.87（当前最新版应更高），建议优先升级至最新正式版测试，因历史版本可能存在已修复的滚动兼容性问题。若仍需解决方案，可尝试用scroll-view包裹textarea并手动控制滚动位置。 内容为 AI 生成，仅供参考

更多关于uni-app textarea在特定条件下自动上推页面失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


11111

提供的 zip 无法解压，请重新提供一份，我在 mac 上用了几个工具都不能解压。
你也手动测试 vue3 是否有问题

我又上传了一个

请问复现了吗

请问复现了嘛

最新

视频

12345

6789

1111

这个问题是由于在 pages.json 中设置了 "bounce": "none" 后，页面弹性滚动被禁用，导致 textarea 在键盘弹出时无法自动调整页面位置。

在 iOS 上，当键盘弹出时，系统会尝试将焦点元素（这里是 textarea）滚动到可视区域。但禁用 bounce 后，页面滚动行为发生变化，影响了系统的自动滚动机制。

解决方案：

  1. 移除 "bounce": "none" 设置（如果允许），这是最直接的解决方法。

  2. 如果必须禁用 bounce，可以手动处理键盘弹出事件：

    • 监听 focus 事件，获取 textarea 的位置信息
    • 使用 uni.pageScrollTo() 手动滚动页面到合适位置

示例代码：

onFocus(e) {
  const query = uni.createSelectorQuery().in(this)
  query.select('#textarea').boundingClientRect()
  query.exec(res => {
    if (res[0]) {
      uni.pageScrollTo({
        scrollTop: res[0].bottom - window.innerHeight + 100,
        duration: 300
      })
    }
  })
}
回到顶部