小程序input输入限制小数位数_小程序键盘输入保留一位小数-CSDN博客

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/108669172

本文介绍如何在小程序中使用input组件，并通过动态设置maxlength属性实现对输入数值的小数位数进行限制，确保用户输入符合预期的数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序input组件本身没有自带这个校验属性，但有一个maxlength属性，可以通过是否输入了小数点来动态计算设置maxlength的方法达到限制输入的目的

保留一位小数

   <view class="list">
  餐前血糖目标
  <text>mmol/L</text>
  <input bindinput="bMealvalueUp" maxlength='{{maxlength}}' type="text" placeholder-class="write" value="{{bMealTime.targetValueUp}}" />
  <text>~</text>
  <input bindinput="bMealvaluedown" maxlength='{{maxlength}}' type="text"  placeholder-class="write" value="{{bMealTime.targetValueDown}}" />

</view>

  bMealvaluedown:function(e){
    let { bMealTime } =this.data;
    bMealTime.targetValueDown = e.detail.value;
    if(!bMealTime.targetValueDown){
      wx.showToast({
        title: '控糖目标值不能为空',
        icon: 'none',
      })
      return
    }
    if(bMealTime.targetValueDown>33.2){
      wx.showToast({
        title: '控糖目标值超限',
        icon: 'none',
      })
      return
    }
    let maxlength = bMealTime.targetValueDown.indexOf('.') + 2;
    if(maxlength == 1){
      maxlength = 4;
    }
    this.setData({
      maxlength,
      bMealTime
    })
  },

保留两位

page({
 data: {
   maxlength:50,//通过maxlength属性限制输入两位小数
   price:0
 },

  inputPrice:function(e) {
      let price = e.detail.value;
      let maxlength = price.indexOf('.') + 3;
//为什么是2呢？没有小数点的时候indexOf('.')返回-1，-1+3=2，
//所以没有小数点的时候限制长度为50位，
//有小数点的话直接设置maxlength为 整数部分+小数点一位+两位小数,indexOf返回的是从0开始计算的索引，所以加3就是保留两位小数
      if(maxlength == 2){
        maxlength = 50;
      }
      this.setData({
        maxlength,
        price
      })
    }
})