输入框onkeyup事件未触发，手机号自动加横杠功能失效求助

嘿，我来帮你排查下代码里的问题～你的程序现在onkeyup没反应、逻辑也有偏差，主要是这几个小细节没处理好：

1. onkeyup事件绑定错误 #

你在HTML里写的是：

onkeyup="keyup"

这里只是把函数名写进去，但没有触发函数调用，浏览器不知道要执行这个函数，得改成带括号的调用形式：

onkeyup="keyup()"

这样按键抬起时才会执行对应的函数。

2. JavaScript函数里的核心逻辑问题 #

你的原函数有几个关键错误：

• var mystring; 初始化时mystring是undefined，用它去做concat操作会得到undefined拼接当前值的错误结果；
• 字符串是不可变类型，concat方法不会修改原变量，而是返回新的字符串，你需要把结果重新赋值给mystring；
• 设置输入框内容时，用element.value比setAttribute('value', ...)更可靠，后者不一定能实时同步输入框的显示内容。

而且原逻辑会每次按键都加一个横杠，导致出现123--456---7890这种混乱格式，完全不符合手机号的要求。

修正后的完整代码 #

我帮你调整了逻辑，实现输入时自动在第3位和第6位数字后插入横杠，同时处理删除操作的情况：

HTML部分 #

<input type="text" id="Phone" name="Phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="###-###-####" onkeyup="formatPhone()">

JavaScript部分 #

function formatPhone() {
  const phoneInput = document.getElementById('Phone');
  // 先清除所有非数字字符，避免横杠重复添加
  let rawValue = phoneInput.value.replace(/\D/g, '');
  let formattedValue = '';

  // 按手机号格式分段拼接
  if (rawValue.length > 0) {
    // 第一段：前3位数字
    formattedValue += rawValue.substring(0, 3);
    // 第二段：第4-6位，前面加横杠
    if (rawValue.length > 3) {
      formattedValue += '-' + rawValue.substring(3, 6);
      // 第三段：第7-10位，前面加横杠
      if (rawValue.length > 6) {
        formattedValue += '-' + rawValue.substring(6, 10);
      }
    }
  }

  // 将格式化后的值设置回输入框
  phoneInput.value = formattedValue;
}

这个代码的逻辑是：先过滤掉所有非数字字符，再按照###-###-####的格式分段拼接，这样无论用户是输入还是删除字符，都能保持正确的格式。

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