限制输入框输入合理的金额

最新推荐文章于 2023-02-11 18:36:12 发布

奔跑的IT小白

最新推荐文章于 2023-02-11 18:36:12 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签：输入框限制输入框只能输入数字

本文链接：https://blog.csdn.net/sinat_41087851/article/details/85088538

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在一些场景下需要对输入框进行一定的限制，比如输入框只允许输入合理的金额

HTML代码：

<input type="text" id="rechargeAmount" oninput="checkInput(this,10)" autofocus placeholder="请输入充值金额">

js代码：

/**
 * 限制输入框只能输入数字和最大长度
 * 如果是小数只能输入到小数点后两位
 * @param {any} obj 输入框对象
 * @param {Number} maxLen 最大长度
 */
function checkInput(obj, maxLen) {
    if (maxLen && obj.value.length > maxLen) {//判断长度
        obj.value = obj.value.slice(0, 10);
    }
    //修复第一个字符是小数点 的情况.  
    if (obj.value !== '' && obj.value.substr(0, 1) === '.') {
        obj.value = "";
    }
    //解决 粘贴不生效
    obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1');
    //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(/[^\d.]/g, "");
    //只保留第一个小数点(.)清除多余的
    obj.value = obj.value.replace(/\.{2,}/g, ".");
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    //只能输入两个小数
    obj.value = obj.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');
    if (obj.value.indexOf(".") < 0 && obj.value !== "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
        if (obj.value.substr(0, 1) === '0' && obj.value.length === 2) {
            obj.value = obj.value.substr(1, obj.value.length);
        }
    }
}

目前，本人测试可以使用，能够达到效果。