使用cleave.js实现同一输入框双格式掩码遇异常问题求助

模态框内有一个input输入框，需要根据点击的按钮切换两种掩码格式：11-11-11和111.111.111。当前遇到的问题是：

• 模态框打开时首次应用的11-11-11掩码正常
• 点击btnB按钮后重新输入，掩码变成异常的11-.1-1.
• 后续切换任何按钮，掩码都固定为这个异常格式

相关代码如下：

$('#btnModalOpen').on('click', function() {
  $('#userModal').modal('show');
  $('#userModal').on('shown.bs.modal', function() {
    $('#btnA').trigger('click');
  })
});

$('#btnA').on('click', function() {
  $('#userInput').val('');
  $('#userInput').trigger('focus');

  $('#userInput').removeClass('formatA');
  $('#userInput').addClass('formatB');

  new Cleave('.formatB', {
    delimiters: ['-', '-'],
    blocks: [2, 2, 2],
  });
});

$('#btnB').on('click', function() {
  $('#userInput').val('');
  $('#userInput').trigger('focus');

  $('#userInput').removeClass('formatB');
  $('#userInput').addClass('formatA');

  new Cleave('.formatA', {
    delimiters: ['.', '.'],
    blocks: [3, 3, 3],
  });
});

1. 重复叠加Cleave实例：每次点击按钮都会新建一个Cleave实例绑定到输入框，多个实例同时作用在同一元素上，掩码规则互相冲突，导致格式混乱。
2. 模态框事件重复绑定：每次打开模态框时，都会给shown.bs.modal绑定一次事件，多次打开后会重复触发btnA的点击操作，进一步加剧实例叠加的问题。

核心思路是：保存Cleave实例的引用，切换格式前先销毁旧实例；同时只绑定一次模态框的shown.bs.modal事件，避免重复触发。

修改后的代码如下：

// 全局保存Cleave实例引用，用于后续销毁
let cleaveInstance = null;

// 只绑定一次模态框的显示完成事件，避免重复触发
$('#userModal').on('shown.bs.modal', function() {
  $('#btnA').trigger('click');
});

$('#btnModalOpen').on('click', function() {
  $('#userModal').modal('show');
});

// 抽离通用的实例创建函数，复用逻辑
function resetCleave(inputSelector, options) {
  // 先销毁旧实例，清除之前的掩码规则
  if (cleaveInstance) {
    cleaveInstance.destroy();
  }
  // 创建新的掩码实例
  cleaveInstance = new Cleave(inputSelector, options);
}

$('#btnA').on('click', function() {
  const $input = $('#userInput');
  $input.val('').trigger('focus');
  
  $input.removeClass('formatA').addClass('formatB');
  
  resetCleave('#userInput', {
    delimiters: ['-', '-'],
    blocks: [2, 2, 2],
  });
});

$('#btnB').on('click', function() {
  const $input = $('#userInput');
  $input.val('').trigger('focus');
  
  $input.removeClass('formatB').addClass('formatA');
  
  resetCleave('#userInput', {
    delimiters: ['.', '.'],
    blocks: [3, 3, 3],
  });
});

额外优化提示：如果formatA/formatB类仅用于绑定Cleave实例，没有其他样式用途，可以直接去掉类的切换操作，直接通过ID选择输入框创建实例，进一步简化代码。

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