uni-app input type="digit"不能输入小数点

uni-app input type="digit"不能输入小数点

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

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

22H2

HBuilderX类型：

正式

HBuilderX版本号：

4.14

浏览器平台：

微信内置浏览器

浏览器版本：

未知

项目创建方式：

HBuilderX

App下载地址或H5网址：

https://oa.haoxianggroup.cn/hxmkl/pay/index.html#/pages/ceshi

示例代码：

```html
<view class="padding">
<text>uview</text>
<u-input v-model="state.value" type="number" placeholder="请输入数字"></u-input>
<text>原生input</text>
<input type="number" v-model="state.value" placeholder="请输入数字" />
</view>
```

操作步骤：

代码示例

预期结果：

可以输入小数点

实际结果：

无法输入小数点

bug描述：

使用input输入框 digit类型 在手机浏览器中不能输入小数点，键盘有小数点，但是输入不进去。经过测试，vue2是可以的（我之前的一个项目，同样的代码同样的环境就可以），现在这个项目是vue3，vue3就输入不了小数点


更多关于uni-app input type="digit"不能输入小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

看一下HBuilder版本是多少，如果是4.12回退版本，目前4.08是可以的，版本更新后出现的bug

更多关于uni-app input type="digit"不能输入小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，之前是4.14，回退到4.08就可以了，谢谢

请提供可以复现的代码片段，我这边测试是正常的

用官方hello uniapp项目能复现吗

在 uni-app 中，input 组件的 type="digit" 是用于输入数字的，但它默认只允许输入整数，不允许输入小数点。如果你需要输入带小数点的数字，可以考虑以下几种解决方案：

解决方案 1：使用 type="number"

将 input 的 type 设置为 "number"，这样可以输入小数点和数字。

<template>
  <input type="number" v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

解决方案 2：使用正则表达式限制输入

如果你需要更精确地控制输入内容，可以使用 input 事件结合正则表达式来过滤输入内容。

<template>
  <input type="text" v-model="inputValue" [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      // 只允许输入数字和小数点
      this.inputValue = event.target.value.replace(/[^0-9.]/g, '');
    }
  }
};
</script>

解决方案 3：使用 uni-app 的 input 组件

uni-app 还提供了 uni-input 组件，你可以通过设置 type="digit" 并结合 input 事件来实现类似的功能。

<template>
  <uni-input type="digit" v-model="inputValue" [@input](/user/input)="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      // 只允许输入数字和小数点
      this.inputValue = event.detail.value.replace(/[^0-9.]/g, '');
    }
  }
};
</script>
回到顶部