news 2026/6/10 12:47:02

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/6/9 20:03:26

SEO已死?Lovable增长负责人揭秘:你的增长剧本正在失效的真相

SEO已死&#xff1f;Lovable增长负责人揭秘&#xff1a;为什么你的增长剧本正在失效 大家好&#xff0c;我是Franco。 最近在增长圈子里&#xff0c;有一个话题被讨论得热火朝天&#xff1a;传统的SEO&#xff08;搜索引擎优化&#xff09;护城河正在崩塌。 这可不是什么危言耸…

作者头像 李华
网站建设 2026/6/10 1:18:05

LobeChat研究方向建议生成AI

LobeChat&#xff1a;构建可控、可扩展AI对话系统的实践路径 在企业纷纷拥抱大语言模型的今天&#xff0c;一个现实问题摆在面前&#xff1a;如何让强大的LLM真正落地到具体业务中&#xff0c;而不是停留在“能聊几句”的演示阶段&#xff1f;很多团队尝试过直接调用OpenAI API…

作者头像 李华
网站建设 2026/6/10 12:38:08

LobeChat劳动合同条款生成器

LobeChat劳动合同条款生成器 在企业日常运营中&#xff0c;人力资源部门常常面临大量重复性文书工作——尤其是劳动合同的起草。每一份合同都需要确保条款完整、用语规范&#xff0c;并严格符合《劳动合同法》及相关地方政策。传统方式依赖人工撰写或模板套用&#xff0c;不仅效…

作者头像 李华
网站建设 2026/6/10 6:48:10

AI绘画大赛联动:用LobeChat生成创意提示词参赛

AI绘画大赛联动&#xff1a;用LobeChat生成创意提示词参赛 在AI艺术创作的浪潮中&#xff0c;一场无声的变革正在发生。越来越多的设计师、艺术家和开发者发现&#xff0c;真正决定一幅AI生成图像质量的&#xff0c;往往不是模型本身&#xff0c;而是那短短几行“咒语”——提示…

作者头像 李华
网站建设 2026/6/9 7:13:26

LobeChat ISO27001体系建设建议

LobeChat 与 ISO27001&#xff1a;构建可信企业级 AI 聊天系统的实践路径 在当今企业加速智能化转型的背景下&#xff0c;AI 聊天系统已不再是简单的“对话接口”&#xff0c;而是承载知识服务、业务流程甚至核心决策支持的关键平台。随着大语言模型&#xff08;LLM&#xff09…

作者头像 李华
网站建设 2026/6/10 5:18:08

vue基于Springboot框架的流浪猫救助系统 流浪宠物领养系统

目录已开发项目效果实现截图开发技术系统开发工具&#xff1a;核心代码参考示例1.建立用户稀疏矩阵&#xff0c;用于用户相似度计算【相似度矩阵】2.计算目标用户与其他用户的相似度系统测试总结源码文档获取/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&…

作者头像 李华