密码框需设type="password"并补充id、name、autocomplete="current-password"、required等属性，确保表单提交、密码管理器填充及基础校验；其value在JS中恒为明文，严禁拼入URL或localStorage；移动端应据需选用type="tel"+inputmode或type="text"+JS掩码；须加autocapitalize="none"和spellcheck="false"（或"off"）优化输入体验。

用 type="password" 就能隐藏输入内容，但别只写这一行

直接给 <input> 加 type="password" 确实会让字符显示为圆点或星号，但实际项目里光这样容易出问题。比如用户想粘贴密码却没提示、移动端键盘没弹出数字键、屏幕阅读器读不出“这是密码框”——这些都会导致体验断裂。

推荐写法：

<input 
  type="password" 
  id="user-password" 
  name="password" 
  autocomplete="current-password" 
  required
>

• id 和 name 必须有，否则表单提交拿不到值，JS 也取不到元素
• autocomplete="current-password" 告诉浏览器这是登录用的密码字段，能触发密码管理器自动填充（不加这个，Chrome 可能拒绝保存）
• 加上 required 避免空提交，服务端不该是唯一校验层

为什么 input[type=password] 的值在 JS 里还是明文？

这是设计使然：type="password" 只控制**渲染层**的显示，DOM 的 value 属性始终是原始字符串。你可以用 JS 直接读写它，比如做强度校验、加密前处理、或传给后端。

常见误操作：

论文常用的tex格式转换为word格式，核心是能转换数学公式（非图片），表格，图表等等

将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献

下载

• 以为加了 type="password" 就“安全了”，结果在控制台打 document.getElementById('user-password').value 一眼看到明文
• 用 innerHTML 或 innerText 去取值——错，必须用 .value
• 把密码拼进 URL 或 localStorage —— 这些地方根本没有“隐藏”机制，和 input 类型无关

移动端上，type="password" 键盘不弹数字？

默认行为因系统而异：iOS 通常弹字母键盘，Android 多数弹带数字的混合键盘。如果业务强依赖数字（比如 PIN 码），type="password" 不合适，得换方案。

可选做法：

• 纯数字 PIN：用 type="tel" + inputmode="numeric" + CSS 掩码（如 text-security: disc，但兼容性差）
• 仍要密码语义但希望数字优先：加 inputmode="decimal"，部分 Android 会优化键盘布局
• 真要掩码又控键盘？只能用 type="text" + JS 拦截粘贴/输入 + 动态替换 DOM 文本（慎用，无障碍和复制粘贴会受损）

看不见的坑：autocapitalize 和 spellcheck

这两个属性在密码框里常被忽略，但它们会影响实际体验：

• iOS Safari 默认开启首字母大写，用户输密码时不小心开了 Caps Lock，自己都意识不到——加 autocapitalize="none" 关掉
• 某些安卓输入法会对密码字段做拼写检查并下划红线，干扰视觉，加 spellcheck="false"
• 部分旧版 UC 浏览器会把 spellcheck="false" 当成无效值，必须写成 spellcheck="off" 才生效（虽然规范是 boolean）

完整最小可用示例里，这几个属性往往比样式更关键。密码框不是“看起来像”就行，它得在各种设备、各种输入法、各种辅助工具下都稳住语义和行为。