news 2026/1/30 3:33:37

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/1/29 21:44:02

LobeChat镜像部署指南:快速搭建属于你的开源ChatGPT聊天界面

LobeChat镜像部署指南&#xff1a;快速搭建属于你的开源ChatGPT聊天界面 在AI对话系统逐渐走入日常使用的今天&#xff0c;越来越多的开发者和企业开始关注如何在保障数据隐私的前提下&#xff0c;灵活接入各类大语言模型。尽管OpenAI的ChatGPT提供了出色的交互体验&#xff0…

作者头像 李华
网站建设 2026/1/30 1:54:45

2、深入探索Bash脚本编程

深入探索Bash脚本编程 1. 技术要求 在开始Bash脚本编程之前,需要满足以下技术要求: - 运行中的Linux系统 :任何Linux发行版都可以,因为现在所有的Linux发行版都预装了Bash shell。 - 安装Visual Studio Code :可以从 这里 免费下载并安装。VS Code具有代码补全、…

作者头像 李华
网站建设 2026/1/30 1:54:02

grafana 未授权访问漏洞设置iptables指定IP访问,拒绝其他所有IP

1、查询规则 iptables -L --line-numbers iptables -t raw -L PREROUTING --line-numbers 2、非集群部署&#xff08;主机&#xff09;时&#xff0c;设置INPUT规则时就能生效 -- 允许指定IP访问 iptables -A INPUT -s IP值 -p tcp --dport gfafana端口号 -j ACCEPT-- 拒绝其…

作者头像 李华
网站建设 2026/1/27 0:58:08

Windows 查看本次开机时间

在Windows系统中&#xff0c;可以通过多种CMD命令来查看电脑的开机时间。以下是几种常用的方法&#xff1a;1. 使用 systeminfo 命令这是最常用且简单的方法。在命令提示符中执行此命令后&#xff0c;可以快速找到系统的启动时间。操作步骤&#xff1a;按下 Win R 键&#xff…

作者头像 李华
网站建设 2026/1/27 2:21:31

在北京,寻找能聊创业、聊生活、一起向上的同行者

在北京这座快节奏的城市里&#xff0c;你是否也常觉得&#xff1a;想聊创业思路时&#xff0c;身边少个能懂你野心的人&#xff1b;想解锁生活乐趣时&#xff0c;找不到合拍的同伴&#xff1f;其实好的同行者&#xff0c;或许只差一个相遇的契机。超哥做新媒体创业&#xff0c;…

作者头像 李华
网站建设 2026/1/28 7:21:44

vue基于Springboot框架的摄影作品分享活动参与网站

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

作者头像 李华