如何基于Imask.js实现条件化手机号掩码功能？

直接通过监听输入变化，动态切换IMask的掩码格式即可，代码修改如下：

var items = document.getElementsByClassName('phone-mask');

Array.prototype.forEach.call(items, function(element) {
  // 定义更新掩码的函数
  function updatePhoneMask() {
    // 销毁已存在的掩码实例，避免冲突
    if (element._maskInstance) {
      element._maskInstance.destroy();
    }
    // 根据输入值首字符判断使用哪种掩码
    var targetMask = element.value.startsWith('0') 
      ? '0000-0000-000' 
      : '000-0000-000';
    
    // 重新创建掩码实例并挂载到元素上
    element._maskInstance = new IMask(element, {
      mask: targetMask,
      placeholder: {
        show: 'always'
      }
    });
  }

  // 页面加载时先初始化一次掩码
  updatePhoneMask();
  // 监听输入事件，实时更新掩码
  element.addEventListener('input', updatePhoneMask);
});

逻辑说明 #

• 给每个目标元素单独维护一个掩码实例，存储在元素的_maskInstance属性上，方便后续销毁和更新
• 每次输入内容变化时，检查当前输入值的第一个字符：
  • 若以0开头，使用0000-0000-000格式
  • 否则使用000-0000-000格式
• 切换掩码前先销毁旧实例，避免多个掩码实例冲突导致的异常

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