Angular中如何实时限制Sweet Alert输入框最大输入长度为20字符

实现原理 #

原有代码使用的inputValidator只有在用户点击提交按钮时才会触发校验，无法在输入过程中拦截超长内容。要实现输入阶段实时限制，直接利用SweetAlert2提供的弹窗渲染完成生命周期钩子，给内部生成的输入框绑定原生HTML长度限制属性即可，从输入源头阻断超长内容录入。

具体改动点 #

• 新增didOpen配置项：弹窗渲染完成后获取内部密码输入框DOM，设置原生maxlength属性为20，该属性原生支持输入实时拦截，键盘输入、粘贴、拖拽填入的内容超过20位都会被自动截断，用户输入到20位后无法继续录入新字符
• 增加输入事件兜底监听：兼容少数特殊输入法、非常规输入路径下maxlength失效的场景，实时将输入内容截断到20位
• 移除原有提交阶段多余的超长校验逻辑：源头已经限制长度，提交时不可能拿到超过20位的内容，只保留密码非空校验即可

完整修改后代码 #

Swal.fire({
    title: "Delete My Account",
    text: "Please enter your password to delete your account",
    input: 'password',
    allowOutsideClick: true,   
    showCloseButton: true,   
    inputAutoTrim:true,
    // 弹窗渲染完成后执行DOM操作
    didOpen: () => {
      const pwdInput = document.querySelector('.swal2-input') as HTMLInputElement;
      // 原生maxlength实现输入实时拦截
      pwdInput.maxLength = 20;
      // 兜底截断逻辑
      pwdInput.addEventListener('input', () => {
        if (pwdInput.value.length > 20) {
          pwdInput.value = pwdInput.value.slice(0, 20);
        }
      })
    },
    // 校验逻辑只保留非空判断即可
    inputValidator: (value) => {
      if (!value?.trim()) {
        return 'Please enter the password';
      }
    }
  }).then((result) => {
      if (result.isConfirmed && result.value) {
          this.userPassword = result.value;
          this.deleteMyAccount();            
      } else if (result.isConfirmed && !result.value) {
        Swal.fire('Password required', 'please enter the password', 'error')
      }
  }); 

效果说明 #

• 用户输入到20位字符后，继续输入任何内容都不会被输入框接收，不会出现先输入超长内容再弹出提示的情况
• 粘贴超过20位的内容时，输入框会自动保留前20位，多余内容直接丢弃
• 兼容Angular环境，不需要引入额外依赖，不影响原有SweetAlert的其他配置逻辑

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