T***@163.com
T***@163.com
  • 发布:2026-06-11 18:19
  • 更新:2026-06-11 18:19
  • 阅读:43

u--input 切换输入框时,@blur 格式化未生效

分类:uni-app

求助:u--input 在微信小程序真机上,切换输入框时失焦格式化无法生效

背景

uni-app + Vue3 + uView2.x,微信小程序真机环境。

需求很简单:两个数字输入框,失焦后自动格式化为 4位小数(如输入 11.0000)。


问题现象

从输入框 A 点击到输入框 B 时,A 的格式化不触发,或触发了但页面显示不更新


已尝试方案(均失败)

@blur 直接赋值

@blur="(val) => powerbill = formatFull(val)"

日志显示值已格式化,但页面仍显示原始值。uView 内部在 blur 后把自身维护的 value 同步回了 v-model覆盖了外部赋值


@blur + nextTick

function onBlur(val, key) {  
  const formatted = formatFull(val)  
  nextTick(() => {  
    fieldMap[key].value = formatted  
  })  
}

依然被覆盖,说明 uView 内部同步时机晚于 nextTick


③ 先清空再赋值 + $forceUpdate

fieldMap[key].value = ''  
nextTick(() => {  
  fieldMap[key].value = formatted  
  proxy.$forceUpdate()  
})

点击空白区失焦时有效 ✅,但快速切换输入框时依然无效 ❌。


④ 官方 :formatter + :format-trigger="'blur'"

<u--input  
  v-model="powerbill"  
  :formatter="numFormatter"  
  :format-trigger="'blur'"  
/>

真机上 format-trigger 似乎不生效,每次输入都触发 formatter,导致用户无法正常删除和编辑内容。


watch(currentFocus) 监听 focus 切换(目前最接近可用)

<u--input  
  v-model="powerbill"  
  @focus="() => currentFocus = 'powerbill'"  
/>  
<u--input  
  v-model="servicecharge"  
  @focus="() => currentFocus = 'servicecharge'"  
/>
watch(currentFocus, (newKey, oldKey) => {  
  if (!oldKey) return  
  applyFormat(oldKey) // 格式化切换前的那个输入框  
})  

function applyFormat(key) {  
  const formatted = formatFull(fieldMap[key].value)  
  fieldMap[key].value = ''  
  nextTick(() => {  
    fieldMap[key].value = formatted  
    proxy.$forceUpdate()  
  })  
}
  • 切换输入框时格式化正常 ✅
  • 点击空白区失焦时,currentFocus 不变,watch 不触发

⑥ 方案⑤ + @blursetTimeout 判断是否切换

function onBlur(key) {  
  setTimeout(() => {  
    if (currentFocus.value !== key) return // 已切换到其他框,由 watch 处理  
    applyFormat(key)  
    currentFocus.value = ''  
  }, 200)  
}

blurfocus 时序相互干扰,破坏了方案⑤原有的 watch 逻辑


想请教

  1. u--input 失焦后,有没有可靠的方式回写 v-model 而不被组件内部状态覆盖?
  2. :format-trigger="'blur'" 在真机小程序上是否有已知兼容问题?
  3. 有没有办法区分「切换到另一个输入框」「点击空白区」这两种失焦场景?
  4. 或者有没有完全不同的思路来实现这个需求?

感谢!

2026-06-11 18:19 负责人:无 分享
已邀请:

要回复问题请先登录注册