uni-app云打包后，从下一页面返回带input页面时，input不能自动获焦

uni-app云打包后，从下一页面返回带input页面时，input不能自动获焦

操作步骤：

<input type="text" class="input_but" ref="elInput" readonly="readonly" confirm-type="search"  :focus="isFocus" v-model="input"  />

预期结果：

从下一页面返回到input页面的时候可以自动获焦

实际结果：

实际没有自动获焦

bug描述：

<input type="text" class="input_but" ref="elInput" readonly="readonly" confirm-type="search"  :focus="isFocus" v-model="input"  />

input在真机测试的时候从下一页面返回到本页面的时候可以自动获焦，但是云打包后安装到手机，从下一页面返回到此input页面就不能自动获焦了

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 正式
HBuilderX版本 3.3.6
手机系统 Android
手机系统版本 Android 9.0
手机厂商 PDA
手机机型 G47CN
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app云打包后，从下一页面返回带input页面时，input不能自动获焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

返回上个页面的时候，手动执行focus

更多关于uni-app云打包后，从下一页面返回带input页面时，input不能自动获焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<input type=“text” class=“input_but” ref=“elInput” @blur=“isFocus = false” @confirm=“doSearch” readonly=“readonly” confirm-type=“search” :focus=“isFocus” v-model=“input” style=“font-size: 22rpx;” value="" placeholder=“输入序号查询” /> onShow() { this.input = null uni.hideKeyboard(); //隐藏软键盘 this.isFocus = false; this.$nextTick(() => { this.input = ‘’ this.isFocus = true; }) this.listsa() },

onShow时已经手动获焦，但还是一样从下一页面返回到本页面时不能获焦

这个问题是由于uni-app在云打包后的页面生命周期处理差异导致的。在真机调试时，页面返回时能正常触发focus逻辑，但云打包后页面可能被缓存，导致焦点状态未正确恢复。

解决方案：

  1. 使用onShow生命周期：在页面的onShow钩子中手动触发焦点
onShow() {
  this.$nextTick(() => {
    this.isFocus = true
    // 或者直接操作DOM
    this.$refs.elInput.focus()
  })
}
  1. 添加延迟确保DOM就绪：
onShow() {
  setTimeout(() => {
    this.isFocus = true
  }, 100)
}

  1. 检查readonly属性：你的input设置了readonly="readonly"，这可能会影响焦点获取。如果需要可输入，建议移除该属性或改为disabled。

  2. 使用页面栈状态管理：在onHide时保存状态，onShow时恢复：

data() {
  return {
    isFocus: false
  }
},
onHide() {
  this.isFocus = false
},
onShow() {
  this.$nextTick(() => {
    this.isFocus = true
  })
}
回到顶部