el-input 限制只能输入正数，小数点后输入两位

最新推荐文章于 2025-04-17 15:54:37 发布

头发超多的程序媛

最新推荐文章于 2025-04-17 15:54:37 发布

阅读量2.6k

点赞数

分类专栏： vue JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44714325/article/details/120235887

版权

vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

JavaScript

22 篇文章

订阅专栏

这篇博客分享了一个JavaScript函数`oninput`，用于限制输入框中数字小数点的位数。该函数可以清除多余的非数字字符，确保小数点前后的正确格式，并根据指定的限制保留小数点后相应位数。对于前端开发中需要控制输入格式的场景非常实用。

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

<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>

/**
* oninput 限制输入框小数点位数，多出的过滤掉
* @param  Number     {val}
* @param  Number     {limit}
 * Created by preference on 2020/04/10
 */
oninput(val,limit = 0) {
  val = val.replace(/[^\d.]/g, ""); //保留数字
  val = val.replace(/^00/, "0."); //开头不能有两个0
  val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
  val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
  val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
  /^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
  const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
  const reg = new RegExp(str)
  if (limit === 0) {
     // 不需要小数点
     val= val.replace(reg, '$1')
  } else {
    // 通过正则保留小数点后指定的位数
     val= val.replace(reg, '$1.$2')
  }
  return val
},