输入掩码无法删除自动添加字符问题求助

你的核心问题在于当前的掩码实现逻辑：每次input事件触发时，都会先把输入框里的所有非数字字符全部清空，再重新拼接带分隔符的掩码字符串。这就导致用户试图删除自动添加的分隔符（比如括号、点、斜杠）时，代码会立刻重新生成这些分隔符，看起来像是“删不掉”。

以下是修复后的代码及改动说明：

修复后的电话输入框脚本 #

document.getElementById('telefone').addEventListener('input', function (e) {
  const input = e.target;
  const rawValue = input.value.replace(/\D/g, ''); // 仅保留输入的数字内容
  let maskedValue = '';

  // 根据数字长度逐步构建掩码，避免强制生成多余分隔符
  if (rawValue.length > 0) {
    maskedValue = '(' + rawValue.substring(0, 2);
    if (rawValue.length > 2) {
      maskedValue += ') ' + rawValue.substring(2, 7);
      if (rawValue.length > 7) {
        maskedValue += '-' + rawValue.substring(7, 11);
      }
    }
  }

  // 仅当新掩码与当前值不同时才赋值，减少不必要的光标跳转
  if (maskedValue !== input.value) {
    input.value = maskedValue;
  }
});

修复后的CNPJ输入框脚本 #

document.getElementById('cnpj').addEventListener('input', function(e) {
  const input = e.target;
  const rawValue = input.value.replace(/\D/g, '');
  let maskedValue = '';

  if (rawValue.length > 0) {
    maskedValue = rawValue.substring(0, 2);
    if (rawValue.length > 2) {
      maskedValue += '.' + rawValue.substring(2, 5);
      if (rawValue.length > 5) {
        maskedValue += '.' + rawValue.substring(5, 8);
        if (rawValue.length > 8) {
          maskedValue += '/' + rawValue.substring(8, 12);
          if (rawValue.length > 12) {
            maskedValue += '-' + rawValue.substring(12, 14);
          }
        }
      }
    }
  }

  if (maskedValue !== input.value) {
    input.value = maskedValue;
  }
});

关键改动说明 #

• 取消强制分隔符生成：不再用正则分组强制拼接所有分隔符，而是根据实际输入的数字长度逐步添加。当数字长度不足时，不会生成多余的分隔符（比如输入1位数字时，不会出现(1)）。
• 减少无效赋值操作：只有当新生成的掩码与输入框当前值不同时才更新内容，避免每次输入都触发赋值导致光标强制跳转到末尾。
• 保留数字过滤逻辑：依然保留replace(/\D/g, '')确保输入框只保留有效数字，同时解决了分隔符无法删除的问题——当用户删除数字时，分隔符会随数字长度减少自动消失，而非被强制重新生成。

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