jQuery Mask插件无法自动添加分隔符问题求助

可能原因及对应解决方案 #

1. DOM未就绪就执行掩码初始化 #

如果掩码代码在目标输入框（#txtCPF）加载完成前执行，会导致无法正确绑定掩码功能。

修正方法：将掩码代码包裹在DOM就绪事件中：

$(function() {
    $('#txtCPF').mask('000.000.000-00', { placeholder: "___.___.___-__" });
});

2. 未正确引入jQuery核心库 #

jQuery Mask插件依赖jQuery运行，必须在加载jquery.mask.js之前先引入jQuery核心文件。检查页面是否遗漏了jQuery的引用：

<!-- 先引入jQuery核心库 -->
<script src="~/js/jquery.min.js"></script>
<!-- 再引入jQuery Mask插件 -->
<script src="~/js/jquery.mask.js"></script>

3. 输入框ID未正确渲染 #

检查页面渲染后的实际HTML，确认EditorFor生成的input元素确实带有id="txtCPF"。如果存在重复ID或ID被覆盖，会导致选择器失效。

可以通过浏览器开发者工具（F12）查看输入框的最终HTML代码，确保ID无误。

4. 其他JS代码冲突 #

页面中其他脚本（如表单验证插件、其他输入处理脚本）可能干扰了jQuery Mask的事件绑定。可以暂时移除非必要脚本，测试掩码功能是否恢复，逐步排查冲突源。

修正后的完整代码示例 #

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.LabelFor(model => model.CPF, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.CPF, new { htmlAttributes = new { @class = "form-control" , id="txtCPF", @type="text"} })
        @Html.ValidationMessageFor(model => model.CPF, "", new { @class = "text-danger" })
    </div>
</div>

<!-- 先引入jQuery核心库 -->
<script src="~/js/jquery.min.js"></script>
<!-- 再引入jQuery Mask插件 -->
<script src="~/js/jquery.mask.js"></script>

<script>
$(function() {
    $('#txtCPF').mask('000.000.000-00', { placeholder: "___.___.___-__" });
});
</script>

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