当前位置: 首页 > news >正文

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 更新,实现跨平台安全输入。

http://www.cnnetsun.cn/news/95313.html

相关文章:

  • 11章 像素和顶点数据导出 - “Vega“ 7nm Instruction Set ArchitectureReference Guide
  • 15人团队,60天,1000万美金ARR:Lovable正在重新定义“软件开发”
  • TensorFlow调试报错看不懂?LobeChat帮你解读
  • 2026届秋招AI岗位狂潮:大厂招聘激增10倍,这份成功上岸攻略不容错过!
  • 1、掌握 Linux 脚本编程:从基础到高级应用
  • 3、Bash脚本编写:基础与进阶
  • C#教程(小部分)
  • HNU 编译系统 作业1
  • vue基于Springboot框架的写字楼危险品管理信息系统的设计和实现
  • LobeChat现场引导标识文案
  • Vue3使用pinia做全局状态管理的简单示例
  • 2025计算机能力竞赛暨城市联赛——算法编程赛道【秋季赛】(二)
  • 用户体验调研问卷:LobeChat设计有效题目
  • BONT-L肽有效成分:棕榈酰六肽-19 Palmitoyl Hexapeptide-19
  • 1、Linux网络管理与资源指南
  • 9、Linux 下 PPP 协议的深入解析与配置指南
  • 13、Linux网络重要特性全解析
  • 17、深入了解 Taylor UUCP:原理、配置与应用
  • 避开“入狱”陷阱:零基础网络安全入门实战指南与知识图谱
  • 基于深度学习的安防监控校园暴力行为检测算法研究
  • 基于STM32单片机的智能家居系统设计
  • 14、Red Hat Linux实用应用指南
  • 零基础学网络安全?入门前必看的3大认知误区与5个关键准备
  • 21、红帽Linux安全与故障排除全攻略
  • 基于微信小程序的校园电子图书馆系统毕业设计
  • 创新首发!基于VMD+WDCNN-SENet的故障诊断模型
  • Python好不好学?
  • NAS 部署私人云平台,支持扩展only office等办公应用
  • Linux EEPROM调试
  • 终极解决方案:告别Visual C++运行库缺失困扰,一键完成全版本部署