uni-app input、textarea跳转页面返回无法选中

uni-app input、textarea跳转页面返回无法选中

操作步骤:

  • input、textarea跳转页面返回

预期结果:

  • 正常点击输入

实际结果:

  • 点击无反应、无法获取焦点

bug描述:

  • input、textarea跳转页面返回无法选中(获取焦点、点击没反应)

图片

alt text alt text

表格

信息项 内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.1
手机系统 Android
手机系统版本号 Android 12
手机厂商 小米
手机机型 红米k40
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app input、textarea跳转页面返回无法选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看看这个帖子,应该跟你的情况类似,官方已经确认bug,等待修复 相同的问题

更多关于uni-app input、textarea跳转页面返回无法选中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX3.3.2 alpha 已修复该问题

这是一个典型的页面生命周期与焦点管理问题。当从新页面返回时,原页面的 inputtextarea 组件可能因页面未完全激活或渲染状态问题导致无法正常获取焦点。

主要原因

  1. 页面返回时,组件可能处于非激活状态,焦点事件未被正确触发。
  2. 快速切换页面可能导致渲染层与逻辑层同步延迟。

解决方案

  1. 使用 nextTick 延迟设置焦点: 在 onShow 生命周期中,使用 $nextTick 确保 DOM 更新完成后手动触发焦点。
    onShow() {
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    }
    
  2. 检查页面栈与组件状态: 确保返回页面时,组件未被意外禁用或隐藏。
  3. 升级 HBuilderX 至最新版本: 某些版本可能存在兼容性问题,建议升级到最新稳定版并重新测试。
  4. 使用 uni.pageScrollTo 重置滚动位置: 若焦点与页面滚动相关,可尝试返回后重置滚动位置。
    onShow() {
      uni.pageScrollTo({ scrollTop: 0 });
    }
    
  5. 临时方案:添加点击事件手动触发焦点
    <input [@click](/user/click)="handleClick" />
    
    methods: {
      handleClick(e) {
        e.currentTarget.focus();
      }
    }
回到顶部