news 2026/9/1 15:32:04

uniapp 小程序 鸿蒙系统中多个input切换、输入框将丢失焦点

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
uniapp 小程序 鸿蒙系统中多个input切换、输入框将丢失焦点

如图,鸿蒙中如果页面有多个输入框用户点击输入框的时候,点击后马上就会失去焦点。

鸿蒙多个input切换失去焦点

  1. HarmonyOS WebView 内核升级
  2. setData diff 策略更激进
  3. 微信基础库更新

是“鸿蒙 不支持输入态的受控组件反复重绘”
问题 代码

<input v-model="userAddress.detail" />

修改代码

export default { data() { return { // ================= 原有数据(未动) ================= address_id: 0, userAddress: { is_default: false }, // ================= 新增:input 显示用 ================= detailShow: '', realNameShow: '', phoneShow: '', // ================= 新增:input 临时值(非响应式) ================= detailTemp: '', realNameTemp: '', phoneTemp: '', }; }, methods: { // ================= 输入过程:只改临时变量 ================= onDetailInput(e) { this.detailTemp = e.detail.value; }, onRealNameInput(e) { this.realNameTemp = e.detail.value; }, onPhoneInput(e) { this.phoneTemp = e.detail.value; }, // ================= 失焦时:同步回 userAddress ================= syncDetail() { this.detailShow = this.detailTemp; this.userAddress.detail = this.detailTemp; }, syncRealName() { this.realNameShow = this.realNameTemp; this.userAddress.real_name = this.realNameTemp; }, syncPhone() { this.phoneShow = this.phoneTemp; this.userAddress.phone = this.phoneTemp; }, // ================= 原有方法(未动) ================= getUserAddress() { if (!this.address_id) return; getAddressDetail(this.address_id).then(res => { this.$set(this, 'userAddress', res.data); // ⭐ 初始化 input 显示值(关键) this.detailShow = res.data.detail || ''; this.realNameShow = res.data.real_name || ''; this.phoneShow = res.data.phone || ''; // 同步临时值 this.detailTemp = this.detailShow; this.realNameTemp = this.realNameShow; this.phoneTemp = this.phoneShow; }); }, } }

平台差异

平台现象原因
鸿蒙输入中必然 blursetData diff 更激进,原生组件重建,焦点不保留
Android 小程序大多数情况正常,少数老机型或复杂表单可能 blurWebView 有焦点缓存与恢复机制
iOS 小程序极少数情况 blurWKWebView 自动 focus 机制,大多数情况兜底

总结一句话

问题不是 v-model,而是输入中频繁触发渲染。鸿蒙放大了问题,Android/iOS 虽然偶发但不稳。最佳实践是用临时变量 + blur 更新,实现跨平台安全输入。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/1 9:42:28

15人团队,60天,1000万美金ARR:Lovable正在重新定义“软件开发”

image.png大家好&#xff0c;我是01。最近看了一期Lennys Podcast&#xff0c;嘉宾是Lovable的创始人Anton Osika。Lovable这家瑞典AI初创公司&#xff0c;创造了一个在欧洲创业圈前所未有的增长神话&#xff1a;15个人的团队&#xff0c;在产品发布后的60天内&#xff0c;就做…

作者头像 李华
网站建设 2026/9/1 10:14:09

TensorFlow调试报错看不懂?LobeChat帮你解读

TensorFlow调试报错看不懂&#xff1f;LobeChat帮你解读 在训练一个图像分类模型时&#xff0c;你是否曾被控制台里突然弹出的一长串红色错误信息搞得一头雾水&#xff1f;比如这条&#xff1a; InvalidArgumentError: Incompatible shapes: [32,64] vs [64,32][[node MatMul…

作者头像 李华
网站建设 2026/9/1 1:31:42

2026届秋招AI岗位狂潮:大厂招聘激增10倍,这份成功上岸攻略不容错过!

2025年夏末&#xff0c;一场针对2026届毕业生的AI人才争夺战比往年提前了至少一个月打响。阿里巴巴、腾讯、字节跳动、百度等头部企业纷纷抛出规模空前的招聘计划&#xff0c;其中AI相关岗位占比普遍超过60%&#xff0c;部分业务线甚至高达80%至90%。 一场前所未有的秋招正在拉…

作者头像 李华
网站建设 2026/9/1 19:18:34

1、掌握 Linux 脚本编程:从基础到高级应用

掌握 Linux 脚本编程:从基础到高级应用 1. 技术要求与 Linux 外壳类型 在开始学习脚本编程之前,了解技术要求和不同类型的 Linux 外壳是很重要的。技术要求通常涉及到对一些基本 Linux 命令的熟悉,如 ls 、 cd 和 which 等。而 Linux 有多种外壳,常见的有 Sh 外壳…

作者头像 李华
网站建设 2026/9/1 13:50:07

3、Bash脚本编写:基础与进阶

Bash脚本编写:基础与进阶 1. 带参数运行脚本 在Bash脚本中,我们可以带参数运行脚本。即便脚本未使用这些参数,它们也会被默默忽略。例如运行 hello1.sh 脚本并传入一个参数: $ hello1.sh fred脚本仍会正常运行且不报错,输出保持不变,依然是 Hello World 。 Bash…

作者头像 李华