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

  • 小程序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
      })
    }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序的特点 小程序是一种不需要下载、安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开...
    Simple_3f19阅读 887评论 0 0
  • 视图层 框架的视图层由WXML(WeiXin Markup language)与WXSS(WeiXin Style...
    勇敢的_心_阅读 1,627评论 0 6
  • create by jsliang on 2018-9-17 17:58:56 Recently revised...
    梁_飘阅读 1,616评论 0 6
  • faba755d6718阅读 85评论 0 0
  • 想要参加园长的码字活动,源于什么?没认真想过,就是喜欢园长吧,不想错过成长的机会。 今天早上我按计...
    自由啦阅读 267评论 0 0