input 输入框限制只能输入小数点后最多两位的数字

最新推荐文章于 2025-04-14 13:41:12 发布

前端陈伟霆

最新推荐文章于 2025-04-14 13:41:12 发布

阅读量1.2w

点赞数 2

分类专栏：小程序文章标签：小程序前端

本文链接：https://blog.youkuaiyun.com/weixin_43927397/article/details/107465390

版权

小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用input组件限制用户输入小数点后最多两位的数字，包括两种方法：通过JS操作和使用正则表达式进行校验。

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

微信小程序 input 输入框限制只能输入小数点后最多两位的数字

wxml

<input value="{{price}}"  type="digit" bindinput="handleInput" placeholder='价格' name="price"></input>

注*:小程序input中type属性
type=“text” 全键盘模式输入
type=“number” 纯数字键盘模式输入
type=“digit” 带小数点的数字键盘模式输入
方法一：
Js

 handleInput:function(e) {
      let price = e.detail.value;
      let that = this;

      price = price.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
      price = price.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      price = price.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      price = price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
      if (price.indexOf(".") < 0 && price != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
          price = parseFloat(price);
      }
     that.setData({
     	price : price ,
    });

     return {
         value: price,
     }
  }

方法二：正则表达式

 handleInput:function(e) {
  //输入框限制只能输入到小数点后两位
 	  e.detail.value = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      let price = e.detail.value;
      let that = this;
     that.setData({
     	price : price ,
    });

     return {
         value: price,
     }
  }