限制输入几位整数或几位小数,失焦后进行格式化处理(负数不满足)

248 阅读1分钟
<input type="text" oninput="limitInput(event, { totalDigit: 5, pointAfterDigit: 3 })"
        onblur="handleFormatDigital(event, { pointAfterDigit: 3 })" onfocus="clearFormatting(event)">
function limitInput(event, { totalDigit = 0, pointAfterDigit = 0 }) {
        let value = event.target.value
        console.log(value);
        value = value.replace(/^0*(0\.|[1-9])/, "$1")
        value = value.replace(/[^\d.]/g, "") // 清除"数字"和"."以外的字符
        value = value.replace(/^\./g, "") // 验证第一个字符是数字而不是字符
        value = value.replace(/\.{1,}/g, ".") // 只保留第一个.清除多余的
        value = value
            .replace(".", "$#$")
            .replace(/\./g, "")
            .replace("$#$", ".")
        let str = ''
        for (let i = 0; i < pointAfterDigit; i++) {
            str += '\\d'
        }
        let reg = new RegExp('^(-)*(\\d*)\\.(' + str + ').*$')
        value = value.replace(reg, "$1$2.$3")
        value = value.indexOf(".") > 0
            ? value.split(".")[0].substring(0, totalDigit) + "." + value.split(".")[1]
            : value.substring(0, totalDigit)
        if (pointAfterDigit === 0) value = value.replace('.', '')
        event.target.value = value
    }

    /**
     * 失去焦点添加逗号和自动小数位补零
    */
    function handleFormatDigital(event, { pointAfterDigit }) {
        let value = event.target.value
        const formatter = new Intl.NumberFormat(undefined, {
            minimumFractionDigits: pointAfterDigit, // 最少保留多少位数字
            maximumFractionDigits: pointAfterDigit // 最多保留多少位数字
        })
        event.target.value = formatter.format(value)
    }

    /**
     * 获取焦点清空逗号
    */
    function clearFormatting(event) {
        let value = event.target.value
        event.target.value = value.replaceAll(',', '')
    }