替代已弃用的evt.which/evt.keyCode实现手机号实时格式化的方案咨询

嘿，我完全懂你现在的困扰——那些弃用警告看着闹心，而且老的键盘事件属性确实已经被标准弃用了。咱们来重构一下你的代码，解决这些问题的同时，还能让手机号实时格式化的功能更可靠。

首先，先说说你遇到的两个核心问题：

• evt.which/keyCode弃用：现在浏览器推荐使用evt.key或者evt.code来获取按键信息，这两个属性是当前标准的一部分。
• document元素获取报错：大概率是你的代码在DOM还没完全加载完成时就执行了，导致找不到目标输入框。咱们可以用DOMContentLoaded事件来确保DOM就绪后再操作元素。

另外，原来的keyup事件其实覆盖场景有限（比如用户粘贴内容时不会触发），换成input事件会更靠谱，能处理所有输入场景。

下面是重构后的完整代码，我会一步步解释改进点：

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  const contactPhoneInput = document.getElementById('ContactPhone');

  // 页面加载时先格式化已有值
  contactPhoneInput.value = phoneFormat(contactPhoneInput.value);

  // 监听输入事件（覆盖键盘输入、粘贴、拖拽等所有场景）
  contactPhoneInput.addEventListener('input', function(evt) {
    // 格式化输入值
    this.value = phoneFormat(this.value);
  });

  // 限制输入仅允许数字和必要的控制键（退格、删除等）
  contactPhoneInput.addEventListener('keydown', function(evt) {
    // 允许控制键：退格、删除、方向键、Tab
    const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    if (allowedControlKeys.includes(evt.key)) {
      return;
    }
    // 只允许数字键（0-9）
    if (!/^\d$/.test(evt.key)) {
      evt.preventDefault();
    }
  });

  // 手机号格式化核心函数（保留你的逻辑，微调格式）
  function phoneFormat(input) {
    // 移除所有非数字字符
    input = input.replace(/\D/g, '');
    // 限制最多10位数字
    input = input.substring(0, 10);
    const length = input.length;

    if (length === 0) {
      return '';
    } else if (length < 4) {
      return `(${input}`;
    } else if (length < 7) {
      return `(${input.substring(0, 3)}) ${input.substring(3)}`;
    } else {
      return `(${input.substring(0, 3)}) ${input.substring(3, 6)}-${input.substring(6, 10)}`;
    }
  }
});

<input type="text" id="ContactPhone" autocomplete="off">

关键改进点说明： #

1. DOM就绪检测：用DOMContentLoaded包裹代码，确保只有当页面所有DOM元素加载完成后才执行，避免"document使用未定义"类的错误。
2. 替换键盘事件属性：用evt.key替代evt.which/keyCode，直接判断按键内容，逻辑更直观也符合现代标准。
3. 改用input事件：相比keyup，input事件能响应所有输入操作（包括粘贴、自动填充、拖拽文本等），格式化更及时。
4. 优化输入限制：通过keydown事件拦截非数字输入，同时允许必要的控制键（比如退格、方向键），提升用户体验。
5. 简化代码逻辑：缓存输入框元素引用，避免重复调用getElementById，提升性能。

这个版本的代码不会再出现弃用警告，同时功能更健壮，能处理更多用户输入场景。如果还有其他细节需要调整，比如支持国际号码格式，随时告诉我哦！

内容来源于stack exchange