uniapp 小程序 鸿蒙系统中多个input切换、输入框将丢失焦点
问题不是 v-model,而是输入中频繁触发渲染。鸿蒙放大了问题,Android/iOS 虽然偶发但不稳。最佳实践是用临时变量 + blur 更新,实现跨平台安全输入。
·
如图,鸿蒙中如果页面有多个输入框用户点击输入框的时候,点击后马上就会失去焦点。
鸿蒙多个input切换失去焦点
- HarmonyOS WebView 内核升级
- setData diff 策略更激进
- 微信基础库更新
是“鸿蒙 不支持输入态的受控组件反复重绘”
问题 代码
<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;
});
},
}
}
平台差异
| 平台 | 现象 | 原因 |
|---|---|---|
| 鸿蒙 | 输入中必然 blur | setData diff 更激进,原生组件重建,焦点不保留 |
| Android 小程序 | 大多数情况正常,少数老机型或复杂表单可能 blur | WebView 有焦点缓存与恢复机制 |
| iOS 小程序 | 极少数情况 blur | WKWebView 自动 focus 机制,大多数情况兜底 |
总结一句话
问题不是 v-model,而是输入中频繁触发渲染。鸿蒙放大了问题,Android/iOS 虽然偶发但不稳。最佳实践是用临时变量 + blur 更新,实现跨平台安全输入。
更多推荐



所有评论(0)