uniapp 如何实现输入数字小数点控制

在uniapp中如何限制输入框只能输入数字和小数点，并且控制小数点的位数？比如最多只能输入两位小数。有没有现成的组件或方法可以实现这个功能？最好能提供具体的代码示例。

2 回复

在uniapp中，可以通过监听输入事件，用正则表达式过滤非数字和小数点，并限制小数点后位数。例如：value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')


在 UniApp 中，可以通过以下方法控制输入数字的小数点位数，确保用户输入符合要求（例如限制为两位小数）。以下是实现步骤和示例代码：

方法一：使用 input 事件和正则表达式

在输入框的 input 事件中，通过正则表达式过滤并格式化输入值，限制小数点后位数。

示例代码：

<template>
  <view>
    <input 
      type="digit" 
      v-model="inputValue" 
      @input="handleInput" 
      placeholder="请输入数字（最多两位小数）"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(e) {
      let value = e.detail.value;
      // 正则匹配：允许数字和小数点，且小数点后最多两位
      let reg = /^\d*\.?\d{0,2}$/;
      if (!reg.test(value)) {
        // 如果输入不符合规则，回退到上一次有效值
        value = this.inputValue;
      }
      this.inputValue = value;
    }
  }
};
</script>

方法二：使用 blur 事件处理

在输入框失去焦点时格式化数值，适用于实时性要求不高的场景。

示例代码：

<template>
  <view>
    <input 
      type="digit" 
      v-model="inputValue" 
      @blur="formatDecimal" 
      placeholder="输入后失去焦点格式化"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    formatDecimal() {
      let value = this.inputValue;
      // 转换为数字并固定两位小数
      if (value && !isNaN(value)) {
        this.inputValue = parseFloat(value).toFixed(2);
      } else {
        this.inputValue = ''; // 非数字时清空
      }
    }
  }
};
</script>

注意事项：

  • 输入类型：建议设置 type="digit" 以在移动端调起数字键盘。
  • 正则表达式：可根据需求调整小数点位数（例如 \d{0,1} 限制一位小数）。
  • 兼容性：在真机测试确保键盘行为符合预期。

以上方法简单有效，可根据实际需求选择实时过滤或失焦格式化。

回到顶部