uni-app 小程序所有input无法获取焦点（偶发）

uni-app 小程序所有input无法获取焦点（偶发）

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

示例代码：

<view class="" style="background: #fff; padding: 0 20upx"> <u-form style="" :label-width="150" :model="form" ref="uForm"> <u-form-item label="收件人" prop="userName"> <input v-model="form.userName" :focus="false" placeholder-style="color: #c0c4cc;" placeholder="请输入收件人姓名" /> </u-form-item> <u-form-item label="手机号" prop="phone"> <input v-model="form.phone" :focus="false" placeholder-style="color: #c0c4cc;" placeholder="请输入手机号" /> </u-form-item> <u-form-item label="收件小区" prop="address"> <u-input v-model="form.address" @focus="commitysel" placeholder="请选择收件小区" /> <u-icon slot="right" name="arrow-right" @click="commitysel"></u-icon> </u-form-item> <u-form-item label="详细地址" prop="detailress"> <input v-model="form.detailress" :focus="false" placeholder-style="color: #c0c4cc;" placeholder="请输入详细地址" /> </u-form-item> </u-form> </view>

更多关于uni-app 小程序所有input无法获取焦点（偶发）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

使用原生小程序（不使用 uni-app）测试一下是否有相同问题

更多关于uni-app 小程序所有input无法获取焦点（偶发）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，我都测试不出来，是有些用户反馈出现这个问题；我看之前有人出现类似情况（偶发）

初步怀疑是微信的原生输入框在部分设备上存在兼容问题。

回复 DCloud_UNI_GSQ: 有什么解决方案没

回复 z***@126.com: 反馈给微信开发人员，请求修复

回复 DCloud_UNI_GSQ: 我其他uniapp小程序没出现这个问题只有这个小程序出现很奇怪

回复 z***@126.com: 找一下规律

回复 DCloud_UNI_GSQ: 这个问题还是存在，大佬最近有其他人反馈这个问题么

我都测试不出来，是有些用户反馈出现这个问题（偶发）

附件上传了视频

这是一个典型的uni-app小程序输入框焦点问题，偶发性通常与以下原因有关：

1. 组件层级问题

uView的u-form-item和u-input组件可能在某些情况下影响了原生input的焦点获取。建议：

  • 统一使用原生input或统一使用u-input，避免混用
  • 检查是否有z-index层级冲突

2. focus绑定问题

代码中所有input都设置了:focus="false"，这可能导致焦点状态被锁定。建议：

<!-- 移除:focus绑定或改为动态控制 -->
<input v-model="form.userName" placeholder="请输入收件人姓名" />

3. 页面滚动影响

小程序中页面滚动时，input可能失去焦点。可以尝试：

  • 在pages.json中配置页面样式：
{
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}

4. 异步渲染问题

如果表单数据是异步获取的，可能在渲染完成前用户就尝试点击input。可以：

  • 确保数据加载完成后再显示表单
  • 使用v-if控制渲染时机

5. 事件冲突

u-input组件绑定了@focus="commitysel"，而旁边的icon也有@click="commitysel"，可能存在事件冒泡冲突。建议简化事件处理。

临时解决方案

在偶发时，可以尝试：

  1. 滑动页面后再次点击input
  2. 使用setTimeout延迟获取焦点：
setTimeout(() => {
  this.$refs.input.focus()
}, 100)
回到顶部