请求指导：基于jQuery实现指定规则的输入框自动格式化

嘿，我明白你想要的效果了——先让用户输入两位数字，自动帮他们加上前后括号，之后就能随便输入内容。之前用jQuery mask没搞定没关系，咱们不用复杂插件，用原生JS或者简单的jQuery代码就能实现，我给你写两个方案，你挑顺手的来：

这个方案不用引入任何库，直接写在页面里就能用，逻辑清晰，兼容性也不错：

// 获取目标输入框
const input = document.getElementById('target-input');

input.addEventListener('input', function(e) {
  let value = this.value;
  // 先处理括号内的部分：提取已有的数字内容
  const bracketMatch = value.match(/^\((\d{0,2})\)/);
  
  if (bracketMatch) {
    // 已经有括号结构了
    let digits = bracketMatch[1];
    const restContent = value.slice(bracketMatch[0].length);
    
    // 如果用户删除括号里的数字，回到可输入两位数字的状态
    if (digits.length < 2) {
      // 过滤非数字字符
      digits = digits.replace(/\D/g, '');
      this.value = `(${digits})${restContent}`;
      // 保持光标在括号内的正确位置
      this.setSelectionRange(2 + digits.length, 2 + digits.length);
    } else {
      // 括号内已满两位数字，后面内容不限制，直接保留
      this.value = `(${digits})${restContent}`;
    }
  } else {
    // 还没有括号结构，先处理前两位输入
    // 过滤非数字字符
    const filtered = value.replace(/\D/g, '');
    if (filtered.length >= 2) {
      // 输入满两位，自动加上括号，后面如果有内容也保留
      this.value = `(${filtered.slice(0,2)})${filtered.slice(2)}${value.replace(/\d/g, '')}`;
      // 光标跳到括号后面
      this.setSelectionRange(5, 5);
    } else {
      // 还没满两位，只保留数字
      this.value = filtered;
    }
  }
});

使用的时候，给你的输入框加个id="target-input"就行，比如：

<input type="text" id="target-input" placeholder="先输入两位数字...">

如果你项目里已经用了jQuery，这个写法更简洁：

$('#target-input').on('input', function() {
  let $this = $(this);
  let value = $this.val();
  const bracketMatch = value.match(/^\((\d{0,2})\)/);
  
  if (bracketMatch) {
    let digits = bracketMatch[1].replace(/\D/g, '');
    const rest = value.slice(bracketMatch[0].length);
    $this.val(`(${digits})${rest}`);
    // 处理光标位置
    const cursorPos = 2 + digits.length;
    this.setSelectionRange(cursorPos, cursorPos);
  } else {
    const filtered = value.replace(/\D/g, '');
    if (filtered.length >= 2) {
      $this.val(`(${filtered.slice(0,2)})${filtered.slice(2)}${value.replace(/\d/g, '')}`);
      this.setSelectionRange(5, 5);
    } else {
      $this.val(filtered);
    }
  }
});

• 这两个方案都处理了光标位置，用户输入或删除时不会出现光标乱跑的情况，体验更流畅
• 如果用户尝试在括号内输入非数字，会自动过滤掉，保证括号里只有两位数字
• 当括号里的数字被删到少于两位时，会回到可输入数字的状态，删完的话就重新开始输入两位数字

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