PDA扫码后发起网络请求,清空输入框,并将焦点重新聚焦。偶现输入框无法清空、焦点聚焦失败。已证实是uni-app的hbuilder更新的问题,3.5.3版本打出来的包是正常的,往上全部都有这个问题。
PDA扫码后发起网络请求,清空输入框,并将焦点重新聚焦。偶现输入框无法清空、焦点聚焦失败。已证实是uni-app的hbuilder更新的问题,3.5.3版本打出来的包是正常的,往上全部都有这个问题。
示例代码:
<u-input v-model="paramsData.codeAndName" :placeholder="$t('common1.scan'||'请扫描')" :border="true"
@confirm="search($event)" :focus="firstFocus"></u-input>
//这部分是函数:
search(e) {
this.$http.get({
url: `/...`,
}).then(res => {
...
}).catch(err => {
}).finally(() => {
//清空输入框
this.paramsData.codeAndName = ''
//重新聚焦到输入框
this.firstFocus = false
this.$nextTick(() => {
this.firstFocus = true
})
})
}
操作步骤:
如上代码,在PDA上扫描复现。在H5端和手机上无法扫描,因此无法复现。
预期结果:
扫描多次,输入框始终可以聚焦。
实际结果:
扫描多次后,输入框就失去焦点。
bug描述:
PDA扫码,扫码结束后调用事件,清空输入框,并将焦点重新聚焦到输入框。偶现输入框无法清空、焦点无法重新聚焦。有时候扫描七八次会出现焦点未回到输入框的情况,有时候扫描十几次会出现。已证实是hbuilder更新的问题,3.5.3版本打出来的包是正常的,往上的版本全部都有这个问题。 目前使用Uniapp开发PDA的人特别多,希望官方可以重视这个问题,另外可以看一下这个链接下面的反馈,我猜测是相同的原因导致的这个问题。官方说已修复,但是评论区的反馈都说未修复。谢谢。 链接:https://ask.dcloud.net.cn/question/153554
### 表格
| 信息类别 | 信息内容 |
|----------------|------------------------|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本 | window11 |
| 开发工具 | HBuilderX |
| 工具版本 | 3.8.12 |
| 手机系统 | Android |
| 手机系统版本 | Android 6.0 |
| 手机厂商 | 华为 |
| 手机机型 | PDA |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
更多关于PDA扫码后发起网络请求,清空输入框,并将焦点重新聚焦。偶现输入框无法清空、焦点聚焦失败。已证实是uni-app的hbuilder更新的问题,3.5.3版本打出来的包是正常的,往上全部都有这个问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于PDA扫码后发起网络请求,清空输入框,并将焦点重新聚焦。偶现输入框无法清空、焦点聚焦失败。已证实是uni-app的hbuilder更新的问题,3.5.3版本打出来的包是正常的,往上全部都有这个问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题确实是HBuilderX更新后引入的已知bug,主要出现在Android平台的PDA设备上。从3.5.3之后的版本都存在输入框清空和焦点控制失效的问题。
根据问题描述和代码分析,建议尝试以下临时解决方案:
- 使用setTimeout包裹焦点控制逻辑:
this.paramsData.codeAndName = ''
setTimeout(() => {
this.firstFocus = false
this.$nextTick(() => {
this.firstFocus = true
})
}, 100)
- 或者改用原生DOM操作强制聚焦:
this.paramsData.codeAndName = ''
this.$nextTick(() => {
const input = this.$refs.inputRef?.$el?.querySelector('input')
input?.focus()
})