如何在HTML中实时限制PAN卡号的用户输入格式？

可以通过HTML+原生JavaScript实现这个需求，不需要依赖第三方库就能做到实时限制输入格式，以下是具体实现思路和代码示例：

核心实现逻辑 #

• 按位置限制字符类型：根据当前输入的长度，分三个阶段过滤字符：1-5位仅允许大写字母，6-9位仅允许数字，第10位仅允许大写字母
• 全场景拦截：覆盖键盘输入、粘贴、拖拽输入等所有内容输入途径，确保不符合规则的内容无法进入输入框
• 保留编辑体验：允许退格、删除、方向键移动光标、全选复制粘贴等基础操作，避免破坏用户习惯

完整代码示例 #

HTML部分 #

<input type="text" id="panInput" placeholder="AAAAA1111A" maxlength="10">

JavaScript部分 #

const panInput = document.getElementById('panInput');

// 处理输入事件（覆盖键盘输入、粘贴、拖拽等场景）
panInput.addEventListener('input', handlePanInput);

// 处理按键事件，允许必要的编辑操作
panInput.addEventListener('keydown', handlePanKeydown);

// 专门处理粘贴事件，过滤粘贴内容
panInput.addEventListener('paste', handlePanPaste);

function handlePanInput() {
  let value = panInput.value.toUpperCase(); // 统一转为大写，符合PAN卡号常规格式
  let filteredValue = '';

  // 分阶段过滤字符
  for (let i = 0; i < value.length; i++) {
    const char = value[i];
    if (i < 5) {
      // 前5位仅保留大写字母
      if (/[A-Z]/.test(char)) filteredValue += char;
    } else if (i < 9) {
      // 第6-9位仅保留数字
      if (/[0-9]/.test(char)) filteredValue += char;
    } else if (i === 9) {
      // 第10位仅保留大写字母
      if (/[A-Z]/.test(char)) filteredValue += char;
    }
  }

  // 记录并恢复光标位置，避免修改值后光标跳走
  const cursorPos = panInput.selectionStart;
  panInput.value = filteredValue;
  panInput.setSelectionRange(cursorPos, cursorPos);
}

function handlePanKeydown(e) {
  // 允许基础编辑键：退格、删除、方向键、Tab
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  // 允许Ctrl/Cmd+A/C/V等快捷键
  const isModKey = e.ctrlKey || e.metaKey;
  const isAllowedModAction = isModKey && (e.key === 'a' || e.key === 'c' || e.key === 'v');

  if (allowedKeys.includes(e.key) || isAllowedModAction) return;

  // 根据当前输入长度，判断按键是否符合规则
  const currentLength = panInput.value.length;
  const isLetterKey = /[a-zA-Z]/.test(e.key);
  const isNumberKey = /[0-9]/.test(e.key);

  let isValid = false;
  if (currentLength < 5) isValid = isLetterKey;
  else if (currentLength < 9) isValid = isNumberKey;
  else if (currentLength === 9) isValid = isLetterKey;

  if (!isValid) e.preventDefault();
}

function handlePanPaste(e) {
  e.preventDefault();
  // 获取粘贴的文本并转大写
  const pastedText = (e.clipboardData || window.clipboardData).getData('text').toUpperCase();
  let filteredText = '';

  // 按PAN规则过滤粘贴内容
  let letterCount = 0;
  let numberCount = 0;
  let finalLetterAdded = false;

  for (const char of pastedText) {
    if (letterCount < 5 && /[A-Z]/.test(char)) {
      filteredText += char;
      letterCount++;
    } else if (letterCount === 5 && numberCount < 4 && /[0-9]/.test(char)) {
      filteredText += char;
      numberCount++;
    } else if (letterCount === 5 && numberCount === 4 && !finalLetterAdded && /[A-Z]/.test(char)) {
      filteredText += char;
      finalLetterAdded = true;
    }
    // 达到10位就停止处理
    if (filteredText.length === 10) break;
  }

  // 将过滤后的内容插入到当前光标位置
  const start = panInput.selectionStart;
  const end = panInput.selectionEnd;
  const currentValue = panInput.value;
  const newValue = currentValue.substring(0, start) + filteredText + currentValue.substring(end);
  
  // 再次过滤确保格式正确，然后设置输入框值
  panInput.value = newValue;
  // 调整光标到插入后的位置
  panInput.setSelectionRange(start + filteredText.length, start + filteredText.length);
}

补充说明 #

• 自动转大写：无论用户输入小写还是大写字母，都会统一转为大写，符合PAN卡号的常规格式要求
• 光标维护：修改输入值后会自动恢复光标位置，避免用户编辑时光标跳走的问题
• 全场景覆盖：不仅处理键盘输入，还拦截粘贴操作，确保所有输入途径都符合规则

可选工具库方案 #

如果不想手写原生代码，可以使用Inputmask.js，它支持自定义掩码规则，配置简单：

Inputmask("aaaaa9999a", {
  placeholder: "AAAAA1111A",
  casing: "upper"
}).mask("#panInput");

不过原生实现更轻量，无需额外引入资源。

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