uni-app input组件数字类型输入整数后失焦再输入一个小数点失焦后小数点消失

uni-app input组件数字类型输入整数后失焦再输入一个小数点失焦后小数点消失

示例代码：

<input type="number" v-model="value" placeholder="带小数点的数字键盘" />

操作步骤：

  1. 打开官网示例：https://hellouniapp.dcloud.net.cn/pages/component/input/input
  2. 选择小数点的input，输入123
  3. 点击其它位置使输入框失焦
  4. 再点击输入框，添加一个小数点，变成1.23
  5. 再点击其它位置使输入框失焦，输入框的小数点消失了

预期结果：

小数点不消失

实际结果：

小数点消失了

bug描述：

  1. 打开官网示例：https://hellouniapp.dcloud.net.cn/pages/component/input/input
  2. 选择小数点的input，输入123
  3. 点击其它位置使输入框失焦
  4. 再点击输入框，添加一个小数点，变成1.23
  5. 再点击其它位置使输入框失焦，输入框的小数点消失了

| 项目       | 信息          |
|------------|---------------|
| 产品分类   | uniapp/H5     |
| PC开发环境操作系统 | Windows       |
| PC开发环境操作系统版本号 | 22621.2715    |
| HBuilderX类型 | 正式          |
| HBuilderX版本号 | 4.65          |
| 浏览器平台 | Chrome        |
| 浏览器版本 | 138.0.7204.184|
| 项目创建方式 | HBuilderX     |
| App下载地址或H5网址 | https://hellouniapp.dcloud.net.cn/pages/component/input/input |

更多关于uni-app input组件数字类型输入整数后失焦再输入一个小数点失焦后小数点消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app input组件数字类型输入整数后失焦再输入一个小数点失焦后小数点消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的HTML5 input type=“number” 在移动端浏览器中的行为特性，并非uni-app的bug。

当input类型为number时，浏览器会自动验证输入值。如果输入内容不符合数字格式（比如只有整数部分后跟小数点但没有小数位），在失焦时浏览器会将其格式化为有效数字，导致小数点被移除。

解决方案：

  1. 使用type=“digit”（仅数字，带小数点）
<input type="digit" v-model="value" placeholder="带小数点的数字键盘" />
  1. 使用type="text"配合正则验证
<input type="text" v-model="value" @input="handleNumberInput" placeholder="带小数点的数字键盘" />

methods: {
  handleNumberInput(e) {
    // 只允许数字和小数点
    this.value = e.detail.value.replace(/[^\d.]/g, '')
  }
}
  1. 在失焦时检查并保留有效的小数点格式
onBlur() {
  if (this.value.endsWith('.')) {
    this.value = this.value.slice(0, -1)
  }
}
回到顶部