uni-app input组件的小数点问题

uni-app input组件的小数点问题

开发环境 版本号 项目创建方式
Windows 4,15 HBuilderX
Android Android 13 -
小米 - -
小米11 - -
vue vue3 -

操作步骤：

input的类型为digit，点击小数点，小数点未出现，光标回到起始

预期结果：

input的类型为digit，点击小数点，小数点出现

实际结果：

input的类型为digit，点击小数点，小数点未出现，光标回到起始

bug描述：

input的类型为digit，点击小数点，光标回到起始


更多关于uni-app input组件的小数点问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

升级至HBuilderX 4.17 alpha后试下

更多关于uni-app input组件的小数点问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 input 组件时，如果你需要限制用户输入的内容为小数，并且需要控制小数点的位数，可以通过以下几种方式来实现。

1. 使用 type="digit" 或 type="number"

input 组件支持 type="digit" 和 type="number" 属性，这些属性可以限制用户输入的内容为数字。

<template>
  <input type="digit" v-model="inputValue" placeholder="请输入数字" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>
  • type="digit": 允许输入数字和负号。
  • type="number": 允许输入数字、负号和小数点。

2. 使用正则表达式限制小数点位数

如果你需要限制小数点的位数，可以在 input 组件的 @input 事件中使用正则表达式来过滤输入内容。

<template>
  <input type="text" v-model="inputValue" @input="handleInput" placeholder="请输入小数" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      let value = event.detail.value;
      // 限制输入为数字和最多两位小数
      value = value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
      const parts = value.split('.');
      if (parts.length > 1 && parts[1].length > 2) {
        value = parts[0] + '.' + parts[1].slice(0, 2);
      }
      this.inputValue = value;
    }
  }
};
</script>

3. 使用 uni-number-box 组件

如果你需要一个更方便的数字输入组件，可以使用 uni-number-box 组件，它可以方便地控制小数的位数。

<template>
  <uni-number-box v-model="inputValue" :min="0" :max="100" :step="0.01" :decimalLength="2" />
</template>

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

4. 使用 uni-easyinput 组件

uni-easyinput 是 uni-app 提供的一个增强型输入框组件，它支持多种输入类型和验证规则。

<template>
  <uni-easyinput v-model="inputValue" type="number" placeholder="请输入小数" />
</template>

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