uni-app 3.1.14版本中 vue文件中的input内容无法清除

uni-app 3.1.14版本中 vue文件中的input内容无法清除

开发环境 版本号 项目创建方式
Mac 11.3.1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.3.1

HBuilderX类型：Alpha

HBuilderX版本号：3.1.14

手机系统：全部

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

测试过的手机：全部

操作步骤：
- 查看demo

预期结果：
- 可以清除input中的内容

实际结果：
- 无法清除input中的内容

bug描述：
input type 为 number 时，由于vue文件中弹出的键盘并不是九宫格纯数字键盘，是可以输入例如 空格，符号等字符的  
当input内容输入类似 23-2，或者23 2，或者 23!2等等这种形式时，此时通过点击事件或者监听事件无法清除input内容  
不仅如此，当输入以上格式的内容时，e.detail.value 也拿不到值

[inputChange-bug.zip](//ask.dcloud.net.cn/file/download/file_name-aW5wdXRDaGFuZ2UtYnVnLnppcA==__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTA1MTEvNDRhZTliYWQxOWM4YzA1MWJjNzVmMmQwODVlZTVjZTc=)

更多关于uni-app 3.1.14版本中 vue文件中的input内容无法清除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

现在问答社区跟踪bug的效率，相比3.x以前的版本，真的差太远了

更多关于uni-app 3.1.14版本中 vue文件中的input内容无法清除的实战教程也可以访问 https://www.itying.com/category-93-b0.html


目前由于 uniCloud、uni-app（vue3）等开发任务较紧急，社区问题排查分布人力较少，当其开发告一段落，会分配更多人力到社区处理。

回复 DCloud_UNI_GSQ: 唉，难怪了，真是辛苦你们了这么多任务，但是遇到bug了没人跟，我们也着急，我觉得社区问题多人力支援还是要稍微多一些才好

增加配置项目，用于启用内置的 number 类型校验
当关闭时，input 事件附带校验信息
默认关闭
预计下版带上

好的，已在 3.1.19-alpha 中尝鲜

在 uni-app 3.1.14 版本中，input 组件 type 设为 number 时，确实存在无法清除非标准数字格式内容的问题。这是由于系统键盘允许输入非数字字符，但 input 组件内部验证机制会阻止这些值更新到 v-model 绑定的数据中。

问题分析：

  1. 当输入 “23-2” 等包含符号、空格的内容时，input 组件会拒绝将这些值同步到 Vue 数据
  2. 此时 e.detail.value 可能为空或旧值，导致无法通过编程方式清空
  3. 这是 input 组件在数字类型下的验证逻辑缺陷

解决方案：

  1. 临时处理方案：将 input type 改为 “text”，自行添加数字验证逻辑
<input type="text" @input="filterNumber" v-model="inputValue" />

filterNumber(e) {
  this.inputValue = e.detail.value.replace(/[^\d]/g, '')
}
  1. 强制清空方案：使用 $nextTick 确保 DOM 更新
clearInput() {
  this.inputValue = ''
  this.$nextTick(() => {
    // 强制触发 input 事件
    this.$refs.myInput.value = ''
  })
}
回到顶部