解决JS正则表达式在keypress事件中失效及输入规则限制问题

问题根源分析 #

1. 下划线无法显示：原代码里的正则^[A-Z]+(?:_[A-Z]+)*$是用来匹配完整的合法字符串，但按键事件中只检测单个输入字符，单个下划线_不符合这个正则的开头要求，因此被拦截。
2. 前3位无法强制大写：原代码没有判断输入时的光标位置和当前内容长度，无法限制前三位的输入类型。

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="myInput" minlength="3" maxlength="8" placeholder="前3位大写字母，可加下划线">

JavaScript #

$('#myInput').on("keypress", function(e) {
  // 允许退格、删除、箭头键等控制键，避免用户无法编辑内容
  if (e.ctrlKey || e.metaKey || e.keyCode <= 40) {
    return true;
  }

  const inputVal = $(this).val();
  const cursorPos = this.selectionStart;
  const char = String.fromCharCode(e.charCode || e.which);
  
  // 前3位必须是大写字母：光标在前三或内容不足3位时，仅允许输入A-Z
  if (cursorPos < 3 || inputVal.length < 3) {
    if (/^[A-Z]$/.test(char)) {
      // 确保输入后总长度不超过8位限制
      return inputVal.length + 1 <= 8;
    } else {
      e.preventDefault();
      return false;
    }
  } else {
    // 第4位及以后允许输入大写字母或下划线，同时控制总长度
    if (/^[A-Z_]$/.test(char) && inputVal.length + 1 <= 8) {
      // 可选：如果需要禁止连续下划线，取消下面注释
      // if (char === '_' && inputVal.slice(-1) === '_') {
      //   e.preventDefault();
      //   return false;
      // }
      return true;
    } else {
      e.preventDefault();
      return false;
    }
  }
});

// 处理粘贴事件，防止粘贴不符合规则的内容
$('#myInput').on("paste", function(e) {
  e.preventDefault();
  const pastedText = (e.originalEvent || e).clipboardData.getData('text');
  let filteredText = '';
  const currentVal = $(this).val();
  
  // 先补全前3位为大写字母
  const remainingForFirstThree = 3 - currentVal.length;
  if (remainingForFirstThree > 0) {
    // 提取粘贴内容中的大写字母补全前3位
    const firstThreePart = pastedText.substr(0, remainingForFirstThree).replace(/[^A-Z]/g, '');
    filteredText += firstThreePart;
    // 剩余内容只保留大写字母和下划线
    const remainingPart = pastedText.substr(remainingForFirstThree).replace(/[^A-Z_]/g, '');
    filteredText += remainingPart;
  } else {
    // 已有3位，直接过滤剩余内容
    filteredText = pastedText.replace(/[^A-Z_]/g, '');
  }
  
  // 确保最终内容不超过8位
  const finalText = (currentVal + filteredText).substr(0, 8);
  $(this).val(finalText);
});

关键说明 #

• 下划线输入修复：不再用完整字符串正则检测单个字符，而是直接判断字符是否为A-Z或_，且仅在内容长度≥3时允许下划线。
• 前3位强制大写：通过光标位置和当前内容长度双重判断，确保前三位只能输入大写字母，即使用户在中间修改前三位内容也受限。
• 粘贴处理：过滤粘贴内容，自动移除非法字符，保证粘贴后的内容依然符合规则。

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