控制输入框只能输入数字，并在提交时转为int类型

最新推荐文章于 2024-09-13 16:11:15 发布

现在几点，开心一点

最新推荐文章于 2024-09-13 16:11:15 发布

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_47581490/article/details/127861217

vue 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了两种方法来控制HTML输入框（`<el-input>`）只允许用户输入数字和一位小数。方法一是通过正则表达式即时过滤非法字符；方法二是通过`handleInput`函数处理输入值，确保符合格式要求。这两种方法都有效地防止了非数字字符的输入，并限制了小数点的数量和位数。

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

<el-input v-model="count" onkeyup="value=value.replace(/[^\d]/g,'')" />

this.count = Number(this.count.toString().replace(/[^\d]/g, ""));

方法二：控制input输入框输入数字及小数点

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

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

     return {
         value: price,
     }
  }