手机号输入掩码函数退格键操作异常的优化需求问询

你的核心问题是现有格式化逻辑未处理退格/删除键与自动插入符号的交互，导致用户需要手动跳过符号。下面是修改后的实现，解决退格体验问题：

$('[type="tel"]').on('input keydown', function(e) {
  const $input = $(this);
  let val = $input.val().replace(/\D/g, '');
  const selectionStart = $input[0].selectionStart;
  const isBackspace = e.key === 'Backspace';
  const isDelete = e.key === 'Delete';

  // 处理退格/删除键，自动跳过符号
  if (isBackspace || isDelete) {
    const formattedVal = $input.val();
    // 退格时：光标在符号前，直接跳转到符号前的数字位置
    if (isBackspace && selectionStart > 0) {
      const prevChar = formattedVal[selectionStart - 1];
      if (prevChar === ')' || prevChar === '-') {
        e.preventDefault();
        $input[0].setSelectionRange(selectionStart - 1, selectionStart - 1);
        return;
      }
    }
    // 删除时：光标在符号上，直接跳转到符号后的数字位置
    if (isDelete && selectionStart < formattedVal.length) {
      const currChar = formattedVal[selectionStart];
      if (currChar === '(' || currChar === ')' || currChar === '-') {
        e.preventDefault();
        $input[0].setSelectionRange(selectionStart + 1, selectionStart + 1);
        return;
      }
    }
  }

  // 生成格式化后的手机号，避免多余符号
  let formatted = '';
  if (val.length >= 1) formatted += '(' + val.substring(0, 3);
  if (val.length >= 3) formatted += ')' + '-' + val.substring(3, 6);
  if (val.length >= 6) formatted += '-' + val.substring(6, 10);
  // 移除末尾多余的横杠（比如输入3位数字时不会出现(123)-）
  formatted = formatted.replace(/(-)$/, '');

  // 计算并恢复光标位置，避免格式化后光标跳转到末尾
  let newCursorPos = selectionStart;
  const originalLen = $input.val().length;
  const newLen = formatted.length;

  if (!isBackspace && !isDelete) {
    // 输入字符时，自动跳过符号位置
    const addedChars = newLen - originalLen;
    newCursorPos += addedChars;
    newCursorPos = Math.min(newCursorPos, newLen);
  } else {
    // 删除字符时，调整光标位置匹配数字删除后的位置
    const removedChars = originalLen - newLen;
    newCursorPos -= removedChars;
    newCursorPos = Math.max(newCursorPos, 0);
  }

  $input.val(formatted);
  // 延迟设置光标确保DOM更新完成
  setTimeout(() => {
    $input[0].setSelectionRange(newCursorPos, newCursorPos);
  }, 0);
});

关键改进点： #

• 符号自动跳过：退格/删除时，若光标处于括号或横杠位置，自动跳转至相邻数字位置，无需用户手动移动光标
• 光标位置维护：格式化后自动计算光标应处位置，避免光标乱跑
• 格式化逻辑优化：根据输入长度动态生成格式，不会出现未完成的符号（比如输入2位数字只显示(12，而非(12)-）

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