为何.replace()方法在type=number的输入框中无法生效？

问题原因 #

当使用type="number"的输入框时，浏览器会严格校验输入值的格式——只有符合标准数字格式（用.作为小数点分隔符）的内容才会被识别为有效值。一旦输入逗号（,），浏览器会判定这是无效值，直接清空输入框，这就是你替换逗号为点后内容消失的核心原因。

解决方案 #

方案1：保留number类型，拦截输入事件处理

我们可以在用户输入逗号时直接替换为点，避免浏览器识别到无效值：

// 处理键盘输入逗号的情况
$('#productPrice').on('keydown', function(e) {
    // 逗号键的键码是188
    if (e.keyCode === 188) {
        e.preventDefault(); // 阻止默认输入逗号
        this.value += '.'; // 直接插入小数点
    }
});

// 处理粘贴或其他方式输入的逗号
$('#productPrice').on('input', function() {
    let correctedValue = this.value.replace(/,/g, '.');
    // 验证转换后的值是否为有效数字，避免清空
    if (!isNaN(parseFloat(correctedValue)) && isFinite(correctedValue)) {
        this.value = correctedValue;
    }
});

方案2：改用text类型输入框，模拟number功能（推荐）

既然text类型下你的替换代码能正常工作，我们可以保留text类型，同时添加验证和输入限制来模拟number输入框的体验：

1. 修改输入框代码：

<input type="text" pattern="^\d+(\.\d{1,2})?$" min="0" value="0.01" id="productPrice" name="productPrice" class="form-control">

2. 完善替换和输入限制逻辑：

$('#productPrice').on('input', function() {
    // 只保留数字、逗号和点，再把逗号替换为点
    this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
    // 限制最多两位小数
    let parts = this.value.split('.');
    if (parts.length > 2) {
        this.value = parts[0] + '.' + parts[1].substring(0, 2);
    } else if (parts[1] && parts[1].length > 2) {
        this.value = parts[0] + '.' + parts[1].substring(0, 2);
    }
});

这样用户输入逗号会自动转为点，同时输入框能保留类似number的输入限制，提交给数据库的也是符合要求的格式。

方案3：本地化显示+提交时转换（适合严格本地化场景）

如果需要让用户看到逗号格式的价格，但提交时转成点，可以用隐藏输入框存储实际提交值：

<!-- 显示给用户的输入框 -->
<input type="text" id="productPriceDisplay" value="0,01" class="form-control">
<!-- 隐藏的实际提交输入框 -->
<input type="hidden" id="productPrice" name="productPrice" value="0.01">

处理显示和转换逻辑：

$('#productPriceDisplay').on('input', function() {
    let rawValue = this.value.replace(/,/g, '.');
    if (!isNaN(parseFloat(rawValue)) && isFinite(rawValue)) {
        // 把标准格式存入隐藏框
        $('#productPrice').val(rawValue);
        // 转成本地化格式显示给用户
        this.value = parseFloat(rawValue).toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }
});

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