密码强度实时提示应使用oninput监听，通过addeventlistener绑定，用正则和length判断长度、大小写、数字、特殊字符，将结果动态写入相邻small元素；提示文案需具体（如“太短”“建议加数字”），避免placeholder或onchange；移动端需scrollintoview防键盘遮挡。
密码输入框怎么实时显示强度文本
直接用 input 的 oninput 监听，配合一个简单的强度判断逻辑，把结果写进紧邻的 <span></span> 或 <small></small> 元素里就行。别用 onchange，它只在失焦时触发，用户根本看不到实时反馈。
常见错误是把判断逻辑写死在 HTML 里，比如用 oninput="checkStrength(this.value)" 然后在全局定义函数——这容易污染作用域，也难维护。更稳妥的做法是用 addEventListener 绑定，把提示元素通过 id 或相对定位（如 nextElementSibling）找出来。
- 强度判断至少覆盖：长度不足、无大写字母、无数字、无特殊字符（
/[!@#$%^&*]/这类） - 别依赖第三方库做这事，几行正则 +
length就够用 - 提示文案别写“弱/中/强”，改用带颜色的“太短”“建议加数字”“已达标”，用户更清楚该做什么
为什么 placeholder 不能当强度提示用
placeholder 是纯展示，不能动态更新，也不能带样式区分状态。而且一旦用户开始输入，它就消失了，起不到持续提示作用。真有人试过用 JS 动态改 placeholder，结果发现 iOS Safari 会闪退或卡顿——这是已知渲染 bug，不是你代码问题。
正确做法是额外放一个行内元素，比如：
<input type="password" id="pwd"><small id="pwd-tip"></small>
然后 JS 控制 pwd-tip 的 textContent 和 className（比如加 tip-error 或 tip-ok），再配 CSS 控制颜色和间距。
正则判断密码强度容易踩的坑
用 /[A-Z]/.test(value) 检查大写字母没问题，但很多人写成 /A-Z/.test(value)——少了方括号，就变成匹配字母 “A”、“-”、“Z” 三个字符，完全失效。
还有人用 .match() 返回数组再判空，其实 .test() 更轻量、更语义清晰。性能上没差别，但可读性差一截。
- 数字检查用
/d/.test(value)，别写/[0-9]/——虽然等价，但 d 更通用（兼容 Unicode 数字） - 特殊字符正则别贪全，
/[!@#$%^&*()_+-=[]{};':"\|,./?]/这种长串容易漏转义，先列好你要支持的几个，够用就行 - 别在每次输入都跑四五个正则——把它们合并成一次
for循环遍历字符，速度更快，也方便加“连续重复字符”这类规则
移动端键盘弹出时提示文字被遮挡怎么办
iOS 和部分安卓浏览器在软键盘弹出时，不会自动滚动到聚焦的 input，如果提示文字在输入框下方，很可能被盖住。这不是 CSS 能单靠 position: fixed 解决的。
实际有效的方法只有两个：
- 把提示文字放在输入框上方（视觉上稍违和，但 100% 可见）
- 监听
focus事件，在触发时手动调用input.scrollIntoView({ behavior: 'smooth', block: 'center' })
注意：不要在 input 外层套 position: relative 再给提示文字设 position: absolute，那样在键盘弹出后，absolute 元素的位置计算会错乱，尤其在微信内置浏览器里。
这事没有银弹，得测真机。模拟器看不出问题，但用户一输密码就看不见提示，体验直接掉档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
