news 2026/2/5 17:12:12

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/2/4 3:02:51

整体设计 定稿 之 5 讨论问题汇总 和新建 表述总表/项目结构表 文档分析,到读表工具核心设计讨论(豆包助手)

摘要本次讨论聚焦第一阶段核心目标——“架构表读表工具”定版落地&#xff0c;对前期设计进行深化完善并确认落地可行性。首先&#xff0c;明确补充随动原则核心说明&#xff0c;将其作为架构表设计与读表工具开发的核心准则&#xff0c;界定唯一可定的视觉元素与表格形式规则…

作者头像 李华
网站建设 2026/2/5 3:24:00

一文彻底搞懂性能调优

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 什么是性能调优&#xff1f;(what)为什么需要性能调优&#xff1f;(why)什么时候需要性能调优&#xff1f;(when)什么地方需要性能调优&#xff1f;(where)什么…

作者头像 李华
网站建设 2026/2/2 23:19:12

持续学习模型遗忘严重,后来才知道用弹性权重巩固防止参数漂移

&#x1f493; 博客主页&#xff1a;借口的CSDN主页 ⏩ 文章专栏&#xff1a;《热点资讯》 目录人工智能&#xff1a;当科技开始模仿人类的荒诞日常 一、从纽约机场到斯坦福实验室的逆袭剧本 二、AI创业的"真人版木偶戏" 三、AI时代的"数字唐吉诃德" 四、当…

作者头像 李华
网站建设 2026/2/2 4:00:49

python爬虫学习(搜索)

python实现打开网站并进行搜索操作打开B站搜索pythonfrom selenium import webdriver from selenium.webdriver.edge.options import Options from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.edge.ser…

作者头像 李华
网站建设 2026/2/4 18:10:37

13、AWK基础与正则表达式入门

AWK基础与正则表达式入门 1. AWK基础 AWK是一个强大的数据处理工具,可用于过滤和显示文件内容。以下是一些基本操作: - 显示文件内容 :使用 awk 命令可以打印文件的所有行。例如,打印 /etc/passwd 文件的所有行: $ awk { print } /etc/passwd这等同于使用 $…

作者头像 李华