Bootstrap Input Mask不生效且控制台无报错，如何排查该问题？

API 探路者

2026-10-17

排查步骤

检查静态资源加载状态
打开浏览器开发者工具的「网络」面板，确认jquery.inputmask.js、jQuery、jQuery UI等所有依赖资源都返回200状态码，加载无失败。注意你当前使用的3.1.60版本Input Mask与jQuery 3.6.0存在版本兼容风险，旧版Input Mask未适配高版本jQuery的API变动，可尝试降级jQuery到2.x版本，或者升级Input Mask到5.x兼容版本验证。
确认DOM初始化时机
所有初始化代码必须在DOM渲染完成后执行，建议把逻辑包入jQuery DOM就绪回调，避免元素未加载就执行绑定：

$(function() {
  // 所有初始化逻辑放在此处
  $('#due_date').datepicker({
      dateFormat: 'dd-mm-yy'
  });
  $('#due_date').inputmask({
    alias: "datetime",
    inputFormat: "dd-mm-yyyy",
    placeholder: "dd-mm-yyyy"
  });
})

修复配置冲突
你当前在input元素上配置的data-inputmask-placeholder="jj/mm/aaaa"分隔符为/，与期望的-分隔符配置不统一，Input Mask会优先读取元素上的data属性配置，导致格式不符合预期。要么统一修改data属性的占位符为dd-mm-yyyy，要么删除元素上的所有data-inputmask相关属性，直接在JS初始化时传参，配置优先级更高更可控。
调整初始化顺序、排查组件冲突
Input Mask和jQuery UI Datepicker都会监听输入框的输入、焦点事件，存在事件冲突的可能。先注释掉Datepicker的初始化代码，单独测试Input Mask是否生效：
1. 若单独测试生效，说明是组件初始化顺序问题，调整为先初始化Datepicker，再初始化Input Mask即可。
2. 若调整顺序后仍冲突，可在Datepicker的onSelect回调中手动同步输入框值，避免两个组件的格式逻辑互相覆盖。
精准绑定目标元素
不要用通用的$('input').inputmask()批量绑定，直接用ID选择器$('#due_date').inputmask()绑定目标输入框，避免页面其他输入框的配置干扰当前元素。

补充：你当前引入Bootstrap CSS的link标签缺失rel="stylesheet"属性，虽然不影响JS功能，但会导致CSS无法正常加载，建议修改为<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

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