美文网首页
小程序input输入限制小数位数

小程序input输入限制小数位数

作者: 前端来入坑 | 来源:发表于2019-06-12 21:37 被阅读0次
    • 小程序input组件本身没有自带这个校验属性,但有一个maxlength属性,可以通过是否输入了小数点来动态计算设置maxlength的方法达到限制输入的目的

    index.wxml

    <view>
      <input bindinput="inputPrice" maxlength='{{maxlength}}' placeholder="请输入您要充值的金额" type="digit"/>
    </view>
    

    index.js

    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
          })
        }
    })
    

    相关文章

      网友评论

          本文标题:小程序input输入限制小数位数

          本文链接:https://www.haomeiwen.com/subject/udxlfctx.html