uni-app 【报Bug】plus.nativeObj.View TAG 为 input 时软键盘弹出不跟随界面一起移动

uni-app 【报Bug】plus.nativeObj.View TAG 为 input 时软键盘弹出不跟随界面一起移动

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 14

手机厂商：小米

手机机型：K40

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：

  • 使用editShow方法直接调用

预期结果：

  • 输入框跟随界面一起动

实际结果：

  • 输入框不会因为软键盘弹出而上移，会一直固定在界面上的固定位置

bug描述：

plus.nativeObj.View.draw tag为input时，软键盘弹出时输入框不跟随界面一起动。
除了这个没有作用的
''' "app-plus": {"softinputMode": "adjustResize"} '''
我暂时没有找到其他解决方法，请问有法子解决吗

更多关于uni-app 【报Bug】plus.nativeObj.View TAG 为 input 时软键盘弹出不跟随界面一起移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

实际的效果如图

更多关于uni-app 【报Bug】plus.nativeObj.View TAG 为 input 时软键盘弹出不跟随界面一起移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


如果不是bug的话，还望指出哪里写的不对，或者可能出现的原因谢谢

我很失望

太失望嘞

没事，失望会习惯的

回复 xzh: 确实

在使用 uni-app 开发时，如果你使用了 plus.nativeObj.View 创建一个 input 标签，并且在软键盘弹出时发现界面没有跟随软键盘一起移动，这可能是由于原生的 input 标签没有正确处理软键盘弹出事件导致的。

解决方法

  1. 使用 uni-app 自带的 input 组件：

    • 如果你不需要使用原生 input 标签，建议直接使用 uni-app 自带的 input 组件。uni-app 的 input 组件已经处理了软键盘弹出时的界面调整问题。
    <template>
  <view>
    <input type="text" placeholder="请输入内容" />
  </view>
</template>

  2. 手动调整界面位置：

    • 如果你必须使用 plus.nativeObj.View 创建的原生 input 标签，可以监听软键盘弹出事件，并手动调整界面位置。
    plus.key.addEventListener('keyboardchange', function(e) {
  if (e.height > 0) {
    // 软键盘弹出，调整界面位置
    let view = new plus.nativeObj.View('myInput', {
      top: '100px',
      left: '50px',
      height: '40px',
      width: '200px',
      backgroundColor: '#ffffff',
      tags: [{
        tag: 'input',
        id: 'input1',
        placeholder: '请输入内容',
        inputStyles: {
          color: '#000000',
          fontSize: '16px'
        }
      }]
    });
    view.show();
  } else {
    // 软键盘收起，恢复界面位置
  }
});

  3. 使用 uni-app 的 page.json 配置：

    • 在 page.json 中配置 softinputMode 为 adjustResize，这样软键盘弹出时，界面会自动调整。
    {
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "softinputMode": "adjustResize"
  }
}

  4. 使用 uni-app 的 scroll-view 组件：

    • 将页面内容放在 scroll-view 组件中，这样软键盘弹出时，内容可以滚动显示。
    <template>
  <scroll-view scroll-y="true" style="height: 100vh;">
    <view>
      <input type="text" placeholder="请输入内容" />
    </view>
  </scroll-view>
</template>
回到顶部