HTML动态设置输入框maxlength后浏览器自动填充截断如何解决

现有一个输入框：

• 初始配置maxlength = 6，搭配校验规则ng-pattern="/^[0-9]{1,6}$/"，仅允许输入数字内容
• 绑定on-blur失焦事件：输入6位数字后（例如123456），自动格式化为12-34-56的格式，浏览器会记忆该格式化后的值
• 异常表现：调用浏览器记忆的自动填充功能填充字段时（效果参考截图：），仅能填入4位字符，无法完整填充全部内容
• 已尝试无效方案：检测到输入文本包含-字符时动态将maxlength设置为8，未达到预期效果，需实现自动填充时完整填入所有内容的需求。

动态修改maxlength失效的核心原因：浏览器自动填充的执行优先级高于页面绑定的常规事件回调，注入填充值时读取的是元素初始渲染阶段的maxlength配置，等事件触发修改属性时，填充值已经被截断完成。可按以下步骤修复：

• 调整初始属性与校验规则
  直接将输入框初始maxlength设置为8，不再硬编码为6；把ng-pattern正则调整为/^(\d{1,6}|\d{2}-\d{2}-\d{2})$/，同时兼容纯数字输入态、格式化后的带分隔符态的合法性校验。
• 通过逻辑控制纯数字输入阶段的长度限制
  监听输入框input事件，当输入内容不含-（即用户手动输入纯数字阶段），自动过滤非数字字符、截断超过6位的内容，模拟初始maxlength=6的输入限制，不影响用户手动输入的体验。
• 增加自动填充场景的专门监听
  针对浏览器自动填充不触发逐字符输入事件的特性，新增两类监听兜底：
  1. 监听animationstart事件，捕获Chromium系浏览器自动填充触发的autoFillStart标识，检测到自动填充触发时直接确认输入框maxLength值为8
  2. 监听change事件做通用兜底：如果输入值包含-，保持maxLength=8；如果是纯数字内容，自动截断到6位，同步设置maxLength=6
     参考实现代码：

  // 捕获Chromium内核浏览器自动填充触发时机
  inputElement.addEventListener('animationstart', (e) => {
    if (e.animationName === 'autoFillStart') {
      e.target.maxLength = 8;
    }
  });
  
  // 输入过程拦截逻辑
  inputElement.addEventListener('input', (e) => {
    const val = e.target.value;
    if (!val.includes('-')) {
      // 纯数字输入阶段，过滤非数字、截断到6位
      e.target.value = val.replace(/\D/g, '').slice(0, 6);
      e.target.maxLength = 6;
    } else {
      e.target.maxLength = 8;
    }
  });
  
  // 值变化兜底逻辑
  inputElement.addEventListener('change', (e) => {
    const val = e.target.value;
    if (/^\d{6}$/.test(val)) {
      // 自动填充为纯6位数字时，主动触发格式化
      e.target.value = `${val.slice(0,2)}-${val.slice(2,4)}-${val.slice(4,6)}`;
    }
  });
  

• 调整失焦格式化逻辑
  保留原有失焦格式化能力，自动填充完成后如果值为6位纯数字，主动触发格式化逻辑转为带分隔符的标准格式；如果值是被截断的不完整内容，可清空后提示用户重新输入，避免提交无效值。

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