uni-app 组件 <input type="digit" /> 无法输入小数点

uni-app 组件 <input type="digit" /> 无法输入小数点

开发环境 版本号 项目创建方式
Mac 14.4.1 HBuilderX

操作步骤：

  • 输入整数，然后输入小数点，无法输入

预期结果：

  • 可以输入 “123.” 这样的小数

实际结果：

  • 无法输入小数点

bug描述：

<input  type="digit"/>

无法输入输入整数 123 后无法输入小数点，可以在 1 2 3之间加入小输入，当删除小数点时，光标自动移动到第一位


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

2 回复

升级至HBuilderX 4.17 alpha后试下

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


在 uni-app 中使用 <input type="digit" /> 时，type="digit" 是专门用于输入数字的输入类型。然而，type="digit" 默认情况下只允许输入整数，不允许输入小数点。

如果你需要输入包含小数点的数字，可以考虑以下几种解决方案：

1. 使用 type="number"

将 type 属性改为 number，这样输入框将允许输入小数点和数字。

<input type="number" />

2. 使用 type="text" 并添加正则表达式验证

如果你需要更精确地控制输入格式，可以使用 type="text" 并结合正则表达式来限制输入内容。

<input type="text" [@input](/user/input)="handleInput" />

methods: {
  handleInput(event) {
    const value = event.detail.value;
    // 只允许数字和小数点
    const filteredValue = value.replace(/[^0-9.]/g, '');
    // 更新输入框的值
    event.target.value = filteredValue;
  }
}

3. 使用 uni-number-box 组件

uni-app 提供了一个 uni-number-box 组件，可以用于输入数字，并且支持小数。

<uni-number-box :value="numberValue" @change="handleChange" :decimal="true" />

data() {
  return {
    numberValue: 0
  };
},
methods: {
  handleChange(value) {
    this.numberValue = value;
  }
}

4. 自定义输入框组件

你可以自定义一个输入框组件，结合 type="text" 和正则表达式来实现更复杂的输入控制。

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

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