JavaScript-HTML数字输入框多小数点限制问题及函数修改需求

我来帮你搞定这个烦人的问题！你遇到的核心问题应该是原函数在获取输入框值的时候出了差错，加上判断小数点的逻辑有漏洞，才会出现obj.val返回空、没法阻止第二个小数点输入的情况。而且你要支持多个输入框复用，那这个函数得改成通用且健壮的版本才行。

先说说原函数的坑点 #

• 可能误用了值获取方式：比如如果是原生JS输入框，应该用obj.value而不是obj.val（那是jQuery的方法），这会导致获取不到值返回空字符串；
• 没有正确判断输入框已有小数点的情况，导致重复输入没法阻止；
• 可能没处理控制键（比如退格、方向键），导致输入框基本操作受限。

修改后的完整函数 #

直接用这个版本替换你的原函数就行，适配多个输入框：

function restrictChars(e, obj) {
    const CHAR_AFTER_DP = 2; // 要保留的小数位数，可按需修改
    const validList = "0123456789."; // 允许输入的字符
    let key, keyChar;

    // 标准化获取按键信息的内部函数，不用依赖外部的getKey
    function getKey(evt) {
        const event = evt || window.event;
        key = event.keyCode || event.which;
        keyChar = String.fromCharCode(key);
        return { key, keyChar };
    }

    const { key, keyChar } = getKey(e);

    // 允许控制键（退格、删除、方向键），保证输入框正常操作
    if (key === 8 || key === 46 || (key >= 37 && key <= 40)) {
        return true;
    }

    // 如果输入的字符不在允许列表里，直接阻止
    if (validList.indexOf(keyChar) === -1) {
        e.preventDefault();
        return false;
    }

    // 正确获取当前输入框的值，处理空值情况
    const currentValue = obj.value || "";

    // 核心：如果已经有小数点，禁止再输入小数点
    if (keyChar === "." && currentValue.includes(".")) {
        e.preventDefault();
        return false;
    }

    // 限制小数位数：只有当光标在小数点后且位数已满时，阻止输入数字
    if (currentValue.includes(".")) {
        const decimalPart = currentValue.split(".")[1];
        if (decimalPart && decimalPart.length >= CHAR_AFTER_DP) {
            const cursorPos = obj.selectionStart;
            const dotIndex = currentValue.indexOf(".");
            if (cursorPos > dotIndex) {
                e.preventDefault();
                return false;
            }
        }
    }

    return true;
}

怎么用在多个输入框上 #

直接给每个输入框绑定onkeypress事件就行，比如：

<input type="text" onkeypress="return restrictChars(event, this)">
<input type="text" onkeypress="return restrictChars(event, this)">
<!-- 更多输入框同理 -->

关键修改点说明 #

1. 内置按键处理逻辑：把getKey整合到函数内部，避免外部依赖的问题；
2. 正确获取输入值：用原生的obj.value确保能拿到输入框的真实内容，不会返回空；
3. 精准阻止重复小数点：每次输入小数点前，先检查当前值里有没有小数点，有就直接阻止；
4. 智能限制小数位数：只有当光标在小数点后面，且小数位数已经达到设定的CHAR_AFTER_DP时，才阻止输入数字，前面的数字还是可以正常修改；
5. 兼容控制键：允许退格、删除、方向键这些必要的操作，不会让输入框变得难用。

内容的提问来源于stack exchange，提问作者gary arenas