antd input 输入内容限制，只能输入数字，包括负数，带两位小数点

最新推荐文章于 2024-04-30 13:43:08 发布

我的小狗很很可爱

最新推荐文章于 2024-04-30 13:43:08 发布

阅读量1.8k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/chhpearl/article/details/131001907

版权

效果可以参考港股选股器_香港股票筛选查询工具 - 富途牛牛

               <Input
                suffix="%"
                className={styles['wmx-select-token__input']}
                placeholder="0.00"
                value={minValue1}
                onChange={minChange1}
                // onKeyUp={minChange1}
                onBlur={clearNoNum1}
              />

  const [minValue1, setMinValue1] = useState('');

  const minChange1 = (e: any) => {
    setMinValue1(e.target.value);
  };

  const clearNoNum1 = (e: any) => {
    const checkPlan = clearNoNum(e.target.value);
    setMinValue1(checkPlan);
  };

  const clearNoNum = (e: any) => {
    let checkPlan = '' + e;

    const t = checkPlan.charAt(0); //得到第一个字符是否为负号

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

    if (Number(checkPlan) > 999999.99) {
      checkPlan = '999999.99';
    }

    //如果第一位是负号，则允许添加
    if (t == '-') {
      checkPlan = '-' + checkPlan;
    }

    return checkPlan;
  };

这样就实现了 antd input输入框限制数字，包括负数，且保留两位小数的功能