直接使用即可原生隐藏输入内容并显示圆点，无需JS或CSS干预；禁用type="text"加遮盖方案，因其存在明文暴露、无障碍失效、键盘不匹配等严重缺陷。

密码输入框用 就行

直接把 type 属性设为 "password"，浏览器就会自动隐藏输入内容、显示圆点或星号。不需要 JavaScript 或 CSS 额外干预，这是原生支持的语义化写法。

为什么不能用 type="text" 加 CSS 遮盖

有人试图用 type="text" 配合 text-indent、color: transparent 或伪元素遮盖文字，这完全不可靠：

• 复制粘贴时明文暴露
• 开发者工具里 DOM 树中明文可见
• 屏幕阅读器可能误读（尤其未加 aria-label 时）
• 移动端键盘不会触发密码键盘（iOS/Android 默认显示数字+符号键盘）

autocomplete 和 autocapitalize 必须显式关掉

现代浏览器对密码字段有强干预，但默认行为未必符合预期：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• autocomplete="off" 不一定生效，更可靠的是 autocomplete="new-password"（用于注册页）或 autocomplete="current-password"（用于登录页）
• autocapitalize="none" 防止 iOS 自动大写首字母（否则用户输错大小写还发现不了）
• 别漏掉 spellcheck="false"，避免下划红线干扰视觉

完整示例：

<input type="password" name="pwd" autocomplete="new-password" autocapitalize="none" spellcheck="false">

服务端校验前，前端也要做基础长度和字符限制

前端限制不是为了替代后端校验，而是减少无效提交和提升体验：

• 用 minlength="8" 和 maxlength="64" 控制合理范围（太短不安全，太长可能被爆破或拖慢哈希）
• 如果业务要求含大小写字母+数字+符号，可用 pattern 做实时提示（但别用它阻止提交——正则兼容性和用户体验差）
• 避免在 placeholder 里写“请输入密码”，这会暴露字段用途；用空字符串或模糊提示如“●●●●●●●●”更稳妥

密码框看似简单，但每个属性背后都有真实攻击面或交互陷阱。最常被忽略的是 autocomplete 的取值和移动端 autocapitalize 行为——这两项不设对，用户在 iPhone 上输密码就可能反复失败。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！