JavaScript正则替换返回空字符串问题求助

你的问题出在浏览器对type="number"输入框的原生行为限制：当你输入非数字（比如字母、特殊符号）时，浏览器不会将这些无效字符存入输入框的value属性，直接返回空字符串，所以val.replace(regex, '')自然输出空内容。而沙箱环境可能因为浏览器版本差异、测试输入的内容不同（比如输入带小数点的合法数字而非纯无效字符），表现出不同的结果。

解决方法 #

方案1：改用type="text"实现数字输入过滤（推荐）

将输入框类型改为text，配合正则实时过滤非数字字符，同时添加inputmode="numeric"让移动端弹出数字键盘，兼顾体验和可控性：

<input type="text" class="number-input" inputmode="numeric">

$('body').on("input", '.number-input', function(){
    const regex = /[^0-9]/g;
    let cleanVal = $(this).val().replace(regex, '');
    $(this).val(cleanVal);
    console.log(cleanVal);
});

方案2：保留type="number"但调整逻辑

如果必须使用type="number"，可以通过监听keydown事件拦截无效输入，这种方式无法获取无效字符内容，但能直接限制输入行为：

$('body').on("keydown", 'input[type="number"]', function(e){
    // 允许数字、退格、删除、方向键等操作
    const allowedKeys = [48,49,50,51,52,53,54,55,56,57,8,46,37,38,39,40];
    if (!allowedKeys.includes(e.keyCode) && !e.ctrlKey) {
        e.preventDefault();
    }
});

注意：type="number"输入框原生允许小数点、正负号等字符，如果你不需要这些内容，方案1的可控性更强。

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