news 2026/5/26 3:39:38

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/5/25 17:15:39

hot100 15.三数之和

一、思路&#xff1a;1.为方便双指针以及跳过相同元素&#xff0c;先把nums排序。2.枚举nums[i]&#xff0c;将问题转化成nums[j] nums[k] -nums[i]&#xff0c;转变成两数之和的问题。3.题目要求答案中不能有重复的三元组&#xff0c;因此要避免重复。&#xff08;1&#xf…

作者头像 李华
网站建设 2026/5/25 13:27:30

本周GitHub九大神级项目推荐,轻松入门大模型技术,错过就是遗憾!

简介 本文精选10个GitHub热门开源项目&#xff0c;涵盖AI大模型应用、文档处理、任务管理等领域。包括腾讯WeKnora知识库框架、AI画流程图工具、agents.md文档标准、Notebook LLM开源替代品、看板工具Fizzy、简历匹配器、AI编程Agent Goose及安全中间件HumanLayer等&#xff0…

作者头像 李华
网站建设 2026/5/25 12:30:22

LobeChat日程安排助手集成日历API

LobeChat日程安排助手集成日历API 在现代办公节奏日益加快的今天&#xff0c;一个会议通知可能刚发出去&#xff0c;下一秒就被十几条消息淹没。用户不得不在聊天工具、邮件和日历应用之间来回切换&#xff0c;手动记录时间、反复确认空闲时段——这种低效的操作模式早已成为数…

作者头像 李华
网站建设 2026/5/25 1:41:15

9、循环迭代与函数构建:脚本编程的核心技巧

循环迭代与函数构建:脚本编程的核心技巧 在脚本编程中,循环和函数是两个非常重要的概念。循环可以帮助我们重复执行特定的任务,而函数则可以将代码模块化,提高代码的复用性和可维护性。下面将详细介绍循环和函数的相关知识。 循环的使用 在脚本编程中,循环是一种非常重…

作者头像 李华
网站建设 2026/5/25 17:48:00

低光图像增强-MSRCP

一、概述在前文我们已经详细说明了SSR单尺度低光图像增强算法了&#xff0c;作为一种传统的低光图像增强算法&#xff0c;SSR只能作为理论学习的算法&#xff0c;帮助我们了解视网膜算法&#xff0c;学习颜色恒常性理论知识&#xff0c;SSR是不足以算真正的图像增强算法的&…

作者头像 李华
网站建设 2026/5/25 3:17:12

青少年运动员慢性踝关节不稳的四周踝关节康复计划

严正声明&#xff1a;本博客内容仅为学习使用&#xff0c;不具备任何医学建议或者参考价值。如有不适&#xff0c;请遵医嘱。本博客所转载之内容&#xff0c;不能作为正式的医学参考&#xff0c;仅供学习 青少年运动员慢性踝关节不稳的四周踝关节康复计划 Four-Week Ankle-Reh…

作者头像 李华