uni-app editor过高（屏幕-editor<键盘高度）会触发推顶input组件adjust-position效果 推顶导致超出屏幕无法显示输入与光标

uni-app editor过高（屏幕-editor<键盘高度）会触发推顶input组件adjust-position效果 推顶导致超出屏幕无法显示输入与光标

操作步骤：

  • 屏幕高度-输入框高度<editor高度 进行输入内容触发推顶

预期结果：

  • 不进行推顶

实际结果：

  • 推顶导致页面错误

bug描述：

  • editor过高（屏幕-editor<键盘高度）会触发推顶input组件adjust-position效果推顶。导致超出屏幕无法显示输入、光标、editor前面内容。建议增加adjust-position关闭推顶。
  • hello uni-app项目中的editor有同样问题。截图来自hello uni-app 的demo
开发环境 版本号 项目创建方式
Windows Win10 HBuilderX
HBuilderX 3.1.14
手机系统 版本号
Android Android 11
手机厂商 手机机型
小米 小米CC9

Image Image


更多关于uni-app editor过高（屏幕-editor<键盘高度）会触发推顶input组件adjust-position效果 推顶导致超出屏幕无法显示输入与光标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

请问解决了吗

更多关于uni-app editor过高（屏幕-editor<键盘高度）会触发推顶input组件adjust-position效果 推顶导致超出屏幕无法显示输入与光标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没人管

还是没人管吗？

是的

回复 c***@163.com: 我找到了一个相对完善点的，等会儿做出来你找我要代码，是做2个editor页面，一个给苹果用，一个给安卓用。

这是一个已知的 uni-app editor 组件在 Android 平台上的布局问题。当 editor 组件高度过大，导致屏幕剩余高度小于键盘高度时，系统会自动触发 adjust-position 推顶机制，造成页面布局异常。

目前可以通过以下方案临时解决：

  1. 在 editor 组件中设置 adjust-position="false" 属性禁用自动推顶
<editor adjust-position="false"></editor>
  1. 使用 CSS 固定 editor 高度，确保屏幕剩余空间足够容纳键盘
.editor-container {
  height: calc(100vh - 400rpx);
}
  1. 监听键盘高度变化，动态调整 editor 容器高度
onKeyboardHeightChange(({ height }) => {
  // 根据键盘高度调整布局
})
回到顶部