JQuery .mask插件导致number类型输入框超6位数字消失问题求助

问题根源 #

type="number"的输入框仅接受合法数字格式的内容（整数、小数，不能包含千分位分隔符这类非数字符号）。当你用mask插件把6位以上的数字格式化成带.分隔的字符串时，这个值不符合number输入框的规范，浏览器会自动清空不合法的内容，这就是输入第7位后内容消失的原因。

解决方案 #

方案1：改用text类型输入框（推荐）

把输入框类型改成text，这样可以正常使用mask插件添加千分位，同时通过额外验证确保输入的是数字。

修改后的HTML：

<input class="detail-input" name="detail-unit-price" type="text" value="0" required>

调整后的JS代码：

// 实时监听输入并应用千分位掩码
$(document).on("input", '.detail-input', function () {
    // 先移除所有非数字字符，避免输入无效内容
    const rawValue = $(this).val().replace(/\D/g, '');
    // 应用千分位掩码配置
    $(this).mask("000.000.000.000.000.000", {reverse: true});
});

// 表单提交时，将带千分位的字符串转成纯数字（可选，根据后端需求调整）
$('form').on('submit', function() {
    const priceInput = $('.detail-input');
    const pureNumber = priceInput.val().replace(/\./g, '');
    // 可以将纯数字赋值回输入框，或者直接用这个值提交
    priceInput.val(pureNumber);
});

方案2：保留number类型，用格式化显示+真实数值分离

如果必须保留type="number"，可以用一个隐藏的输入框存储真实数字值，同时用可见的text输入框显示格式化后的内容，两者同步：

<!-- 可见的text输入框用于显示格式化后的内容 -->
<input class="detail-input-display" type="text" value="0" required>
<!-- 隐藏的number输入框用于存储真实数值 -->
<input class="detail-input-hidden" type="number" name="detail-unit-price" value="0" hidden>

JS代码：

$(document).on("input", '.detail-input-display', function () {
    const displayInput = $(this);
    const hiddenInput = $('.detail-input-hidden');
    
    // 提取纯数字
    const rawValue = displayInput.val().replace(/\D/g, '');
    if (!rawValue) {
        displayInput.val('0');
        hiddenInput.val(0);
        return;
    }
    
    // 应用千分位掩码到显示框
    displayInput.mask("000.000.000.000.000.000", {reverse: true});
    // 将纯数字同步到隐藏的number输入框
    hiddenInput.val(rawValue);
});

关键提示 #

• 永远不要给type="number"的输入框设置包含非数字符号的内容，浏览器会自动过滤不合法值。
• 若需千分位显示，优先用text类型输入框配合数字验证，既能满足显示需求，又能保证输入合法性。

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