substr()处理末尾连字符失效及手机号输入框退格不删连字符问题

我懂你现在的困扰——做了个模拟电话拨号盘的输入功能，输入到第3位和第7位会自动加连字符模拟手机号格式，但点退格按钮的时候，那些自动加上的连字符死活删不掉，对吧？咱们先捋清楚问题出在哪，再给你搞定它。

从你给出的代码片段来看，你之前的退格逻辑可能只是生硬判断了内容长度，但没考虑到连字符的特殊性。其实咱们换个思路，不用纠结长度，直接判断最后一个字符是不是连字符就好，这样处理起来更精准。

给你整理了完整的修复代码，逻辑更清晰：

$(".phone_digit").click(function(e) {
  const inputBox = $("#input-box");
  let currentContent = inputBox.html().trim(); // 先去掉首尾空格，避免干扰

  if (e.target.id === "phone_delete") {
    // 处理退格操作
    if (currentContent.length === 0) return; // 内容为空就直接返回

    // 检查最后一个字符是不是连字符
    if (currentContent.endsWith('-')) {
      // 是连字符的话，直接删掉它
      inputBox.html(currentContent.slice(0, -1));
    } else {
      // 不是的话，删掉最后一个数字
      inputBox.html(currentContent.slice(0, -1));
    }
  } else {
    // 处理数字输入操作
    const digit = e.target.textContent; // 假设拨号盘DIV里的文本就是数字
    let newContent = currentContent + digit;

    // 计算当前已输入的纯数字数量（排除连字符）
    const digitCount = newContent.replace(/-/g, '').length;
    // 当纯数字数到3或7时，添加连字符
    if (digitCount === 3 || digitCount === 7) {
      newContent += '-';
    }

    // 限制总长度（手机号11位数字+2个连字符，最多13位）
    if (newContent.length <= 13) {
      inputBox.html(newContent);
    }
  }
});

关键逻辑说明： #

• 退格处理：用endsWith('-')直接判断最后一个字符是不是自动添加的连字符，是的话就直接删掉，不用再算长度，逻辑更简单准确。
• 连字符添加逻辑：先把现有内容里的连字符都去掉，统计纯数字的数量，这样就不会因为已有的连字符干扰长度判断，比如输入到第3个数字时，不管之前有没有连字符，都能准确触发添加。
• 长度限制：加了个总长度限制，避免用户输入超过手机号格式的内容，更符合实际需求。

这样修改后，不管是输入时自动加连字符，还是退格时删掉连字符，都能和正常输入体验一致啦。

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