数字输入框输入小数点后未补全小数，300ms后被清空的问题求解

问题原因 #

parseFloat("123.")会返回NaN，触发原有逻辑中的isNaN判断，导致输入值被清空。要解决这个问题，只需调整输入值的处理逻辑，把末尾带小数点的情况视为有效输入。

简便解决方案 #

这里提供两种直接可行的方案：

方案一：自动补全末尾小数点后的0

对以小数点结尾的输入值自动添加一个0，让parseFloat能正确识别为有效数字，同时不影响用户后续输入（用户继续输入小数位时，补的0会被覆盖）：

function delay(callback, ms) {
    var timer = 0;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

$('#test').on('input', delay(function () {
    var el = $(this);
    var value = el.val();
    
    // 处理末尾带小数点的情况
    if (value && value.endsWith('.')) {
        value += '0';
    }
    
    var num = parseFloat(value);
    if (isNaN(num) || num <= 0) {
      value = '';
    }
   
    el.val(value);
}, 300));

方案二：用正则直接验证格式

通过正则表达式判断输入是否符合数字格式（包括整数、带小数、末尾带小数点的情况），避免依赖parseFloat的返回值：

function delay(callback, ms) {
    var timer = 0;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

$('#test').on('input', delay(function () {
    var el = $(this);
    var value = el.val();
    var isValid = false;
    
    // 正则验证：支持整数、小数、末尾带小数点的情况
    if (value) {
        isValid = /^\d+(\.\d*)?$|^\.\d+$/.test(value);
    }
    
    var num = parseFloat(value);
    if (!isValid || (num <= 0 && !isNaN(num))) {
      value = '';
    }
   
    el.val(value);
}, 300));

对应HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="number" id="test" value="" min="0" step="0.01">

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