设置$.mask.definitions['#']覆盖其他输入，如何仅为手机号输入框配置固定不可编辑前缀掩码？

DevOps 小满

2026-10-4

解决方案

核心问题原因

你之前直接修改全局的$.mask.definitions会让所有使用该mask插件的输入框都继承修改后的规则，才会导致其他输入框受影响。我们改用实例级配置即可避免全局污染，同时实现固定前缀不可编辑的需求。

修改后的完整代码

HTML部分

首先去掉输入框的readonly属性，否则用户无法输入内容：

<input type="text" name="Data.Phone" id="Phone" required>

JS部分

$(document).ready(function () {
    $("#Phone").mask("0(5##) ### ## ##", {
        // 实例级自定义规则，仅作用于当前手机号输入框，完全不影响全局配置
        definitions: {
            '#': /[0-9]/
        },
        // 匹配你需要的占位符显示格式
        placeholder: "0(5__) ___ __ __",
        // 失焦不自动清空未完成输入的内容
        autoclear: false,
        // 确保固定前缀始终存在，不会被删除
        onBeforeMask: function (value) {
            const fixedPrefix = "0(5";
            return value.startsWith(fixedPrefix) ? value : fixedPrefix + value.replace(/^0\(5?/, '');
        },
        // 限制光标无法移动到前缀区域，禁止删除前缀
        onKeyDown: function (e, field) {
            const cursorPos = field[0].selectionStart;
            if (cursorPos < 3) {
                field[0].setSelectionRange(3, 3);
                // 拦截退格、删除键的前缀删除操作
                if ([8, 46].includes(e.keyCode)) return false;
            }
        }
    });
    // 初始化时自动填充固定前缀
    $("#Phone").val("0(5");
});