news 2026/7/6 17:55:53

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/7/6 11:17:36

毕设分享 stm32 wifi远程温控风扇系统

文章目录 0 前言1 主要功能2 系统架构3 核心软件设计3.3.2 初始化3.3.3 温度采集与显示 4 实现效果5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff0c…

作者头像 李华
网站建设 2026/7/7 3:16:57

python的fastapi+uvicorn的linux离线部署

一.导出依赖清单&#xff0c;将所有的包打到requirement.txt文件中 两种方式 1.整个环境的包都写进去&#xff0c;可能包含很多与项目无关的依赖 pip freeze > requirements.txt 只想记录项目真正用到的包&#xff0c;可以配合虚拟环境或使用 pipreqs 等工具 pip insta…

作者头像 李华
网站建设 2026/7/6 18:51:29

LobeChat与IPFS结合实现去中心化聊天存档

LobeChat与IPFS结合实现去中心化聊天存档 在AI助手日益渗透个人生活与企业流程的今天&#xff0c;我们越来越依赖这些智能系统来记录决策过程、保存创意灵感&#xff0c;甚至留存法律或医疗咨询的沟通痕迹。然而&#xff0c;当这些宝贵的对话被锁在某个中心化服务器中时——一…

作者头像 李华
网站建设 2026/7/7 15:33:49

LobeChat百度收录加速方法

LobeChat百度收录加速方法 在当前AI应用爆发式增长的背景下&#xff0c;越来越多开发者选择部署自己的聊天机器人门户。然而一个普遍被忽视的问题是&#xff1a;即便功能完善、界面美观&#xff0c;如果搜索引擎看不到你的站点&#xff0c;再优秀的产品也难以被用户发现。尤其在…

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

大模型Prompt工程终极指南:从新手到专家,程序员必备秘籍!

简介 文章详细介绍了Prompt的定义、分类、要素、工作原理及提示工程。Prompt是引导大模型生成响应的初始文本&#xff0c;可分为硬提示/软提示、在线/离线提示等类型。完整Prompt应包含任务、上下文、示例、角色、格式和语气六要素。文章解释了Prompt的工作机制&#xff0c;包…

作者头像 李华
网站建设 2026/7/7 13:12:42

Java_通过反射获取类的结构信息

第一组:java.lang.Class类 1.getName:获取全类名 2.getSimpleName:获取简单类名 3.getFields:获取所有public修饰的属性&#xff0c;包含本类以及父类的 4.getDeclaredFields:获取本类中所有属性 5.getMethods:获取所有public修饰的方法&#xff0c;包含本类以及父类的 6…

作者头像 李华