应使用input事件监听密码强度检测，因其覆盖键盘输入、粘贴、自动填充等所有内容变更场景，可实现真正实时反馈；blur和change事件因触发时机滞后或兼容性差，无法满足实时性要求。
密码强度检测该用哪个事件监听
直接用 input 事件，别用 blur 或 change。用户边输边反馈才叫“实时检测”，blur 要等失焦，change 在某些浏览器里甚至不触发（比如没修改就离开）。input 覆盖所有输入方式：键盘、粘贴、自动填充、剪贴板操作都捕获得到。
注意 Safari 对 paste 事件的兼容性稍弱，但 input 本身能兜底——只要内容变了就会触发，不用额外监听 paste。
状态条 HTML 结构怎么写才不踩布局坑
用一个紧贴 <input> 下方的 <div>，不要用 <code><span></span> 或 <p></p> 默认样式干扰行高和间距。关键点：
<div class="pwd-strength-bar"> 必须设 <code>display: block和明确高度（如height: 4px）- 父容器建议加
position: relative，状态条用position: absolute; bottom: -6px定位，避免影响其他元素流式布局 - 别给状态条设
margin-top，它会把上面的输入框往下推——这是最常见的错位原因
CSS 进度条颜色怎么映射强度等级
别用固定三段式背景色（比如红黄绿硬切），用 CSS 变量配合 JS 动态切换更稳：
.pwd-strength-bar {
background: var(--strength-color, #e0e0e0);
transition: background 0.2s;
}
JS 中根据强度分值（0–4）设置：el.style.setProperty('--strength-color', '#ff5252')（弱）el.style.setProperty('--strength-color', '#ffab40')（中）el.style.setProperty('--strength-color', '#69f0ae')（强）
这样比切 class 更轻量，也不用预定义一堆类名。注意：Chrome 115+ 支持 transition 在 CSS 变量上生效，旧版可 fallback 到 class 切换。
正则判断密码强度容易漏掉什么
只校验「是否含大小写字母+数字+符号」远远不够。真实场景下这几个点常被忽略：
- 长度检查必须前置——
.length 直接判弱，别让正则白跑 - 连续重复字符（如
"aaaaaa"）要单独检测：/(.)\1{2,}/ - 常见弱口令字面量匹配（
"123456"、"password"、"admin"）建议用数组includes()查，别写超长正则 - 中文、emoji、全角字符算不算有效字符？如果业务允许，别在正则里盲目
[a-zA-Z0-9]排除它们
强度分值建议按项累加（如长度+2、大小写+1、数字+1、符号+1、无重复+1），总分 0–5，比布尔式“达标/不达标”更利于渐进式反馈。
状态条不是装饰，是用户对密码安全的唯一视觉锚点。颜色变化慢半拍、位置飘移、强度逻辑漏判——这些细节一旦出问题，信任感就断了。
