uni-app 切换页面输入框无法输入

uni-app 切换页面输入框无法输入

8 回复

查看相关问题：https://ask.dcloud.net.cn/question/136394 未复现你的问题，请详细说明在什么设备上复现的问题，上传复现问题示例项目到附件
【社区问题/bug处理优先级规则】：https://ask.dcloud.net.cn/article/38139

更多关于uni-app 切换页面输入框无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，我刚才也发现了这个问题，form表单中有的输入框点击后切换页面了，然后回来就无法输入了，android设备上

这个问题现在不光是选择地图上的点之后无法输入；现在是切换页面选择文本回填输入框，返回页面之后输入框无法获取焦点，但是仍然可以点击输入框跳转页面选择文本

回复 ddpapa: 相关问题贴中HX3.3.2已修复此问题。你这边是相同问题吗？请提供下简单复现示例（上传附件）

回复 DCloud_UNI_Anne: 用的就是3.3.2的

回复 DCloud_UNI_Anne: 之前打包之后，在手机上测试有问题，今天新建了一个demo，打包后没有这个问题了

回复 ddpapa: 现在新版本已解决这个问题

问题分析：
uni-app 中切换页面后输入框无法输入，通常与页面生命周期、组件渲染或焦点处理有关。以下是常见原因及解决方案：

1. 页面生命周期导致渲染问题

  • 现象：从页面 A 切换到页面 B，输入框无法获取焦点。
  • 可能原因：页面 B 的 onLoad 或 onShow 中有异步操作（如网络请求）阻塞渲染，导致输入框未正常挂载。
  • 解决方案：
    • 确保异步操作不影响页面渲染，可将输入框相关逻辑移至 onReady 或使用 nextTick。
    onReady() {
  this.$nextTick(() => {
    // 确保输入框已渲染
  });
}

2. 输入框组件属性或状态异常

  • 现象：输入框被禁用或值绑定异常。
  • 检查点：
    • 确认 input 组件未设置 disabled 属性。
    • 检查 v-model 绑定值是否被意外重置（如切换页面时数据被覆盖）。
    • 若使用自定义组件，确保内部未阻止事件冒泡（如 @input 事件未正常触发）。

3. 页面切换动画干扰焦点

  • 现象：仅在使用页面动画（如 uni.navigateTo 的动画效果）时出现。
  • 解决方案：
    • 尝试关闭页面切换动画测试：
    uni.navigateTo({
  url: '/pages/pageB',
  animationType: 'none', // 禁用动画
});
    • 或在目标页面的 onShow 中延迟获取焦点：
    onShow() {
  setTimeout(() => {
    this.$refs.input.focus(); // 手动触发焦点
  }, 300);
}

4. 软键盘与页面布局冲突

  • 现象：在 iOS 或部分 Android 机型上，输入框被软键盘遮挡或焦点丢失。
  • 解决方案：
    • 在 pages.json 中配置页面滚动或调整窗口：
    {
  "path": "pages/pageB",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize" // 调整窗口适应软键盘
    }
  }
}
回到顶部