密码输入框怎么设计？显示隐藏与自动填充

密码输入框应默认隐藏内容，由用户主动切换显示；切换只改变可见方式，不清空输入，也不提交表单。按钮写清“显示密码”或“隐藏密码”，为输入文本和按钮分别留足空间，并允许粘贴与密码管理器自动填充。登录时填写已有密码，注册或改密时创建新密码，这两类字段的提示和自动填充语义也要分开。

以“阅读工作台”的邮箱登录页为例，先在界面设计软件中安排邮箱、密码与登录按钮，再细化密码字段的隐藏、显示、键盘焦点和错误状态。同一个字段必须在这些状态间保持一致，不能只画一个眼睛图标就算完成。

眼睛图标之外，写清点击后会发生什么

睁眼图标可能被理解为“当前可见”，也可能被理解为“点击显示”。如果只换图形而没有说明，用户需要先试一次才知道后果。在阅读工作台里，可以把图标与动作名称组合：内容隐藏时显示“显示密码”，内容可见时改为“隐藏密码”。有限空间下只保留图标，也要给按钮明确的可访问名称。

GOV.UK 的密码输入组件采用默认隐藏、由用户选择显示的方式，并分别提供显示与隐藏按钮文案。这种安排把决定权交给正在输入的人：他可能独处，也可能正在共享屏幕，不应因为出现一次输入错误就自动展示全部密码。

控件名称要表达动作，输入框标签则始终说明字段用途。占位文字“请输入密码”会在填入后消失，不能代替固定的“密码”标签；眼睛按钮也不能代替标签。修改密码页面如果有“当前密码”和“新密码”，两个显示按钮的可访问名称应分别带上字段对象，避免听到两个完全相同的“显示密码”却不知道控制哪一个。

隐藏字符主要减少旁观者直接读到内容的机会。MDN 对密码输入框的说明区分了字符遮蔽与传输要求：密码框不是加密方案，星号或圆点也不能证明服务端安全存储。设计稿可以说明可见性，不应在眼睛图标旁附上“已安全加密”之类没有依据的状态。

先画同一个字段的隐藏、显示与焦点状态

以阅读工作台登录页为例，图中邮箱为 designer@example.com，密码为 Design7!，共 8 个字符。隐藏态显示 8 个圆点，切换后仍是同一段文本，输入框、标签和操作按钮的位置保持稳定。

把这几个状态放在同一个 Pixso 文件里，保留相同的字段宽度和文本，才容易发现按钮变长、文字被挤住或焦点边框被裁掉的问题。

字段容器可以分成文本区与切换按钮区。长密码在自己的文本区域内显示和移动光标，不应从按钮下方穿过去；按钮也不应随着内容增长被挤出边界。不要为适配窄屏把显示入口缩成几乎点不到的小眼睛，可以减少周围装饰或调整字段布局。

需要演示点击后的状态变化时，可继续使用Pixso 交互式组件的变体切换组织隐藏和显示两种外观。原型展示用于讨论界面行为，输入框的真实编辑、自动填充与认证结果仍由产品实现，不能把演示连线当成真实密码处理功能。

切换显示时，不要让用户重新输入

用户查看密码往往是想修正中间某个字符。如果点击显示后字段被清空，或光标每次都跳到开头，检查就变成重输。需要交付的规则是：切换不改变输入值；已有选区和编辑位置尽量保持；切换按钮不触发表单提交。实现后应分别用手动输入、粘贴和自动填入走一遍，因为三条路径未必触发相同事件。

不要用两个彼此独立的输入框，一个存明文、另一个存圆点，再靠替换可见层伪装成切换。若两份内容不同步，界面看着正确，提交的却可能是旧值。设计与研发需要围绕同一字段确认状态关系，而不是让“显示”和“隐藏”各自保存一份数据。

显式切换之外，浏览器也可能有自己的显示密码入口，某些设备还会短暂显示刚输入的字符。不能仅凭画板推断最终表现。检查产品支持的浏览器时，应留意是否出现两个眼睛按钮、点击范围重叠，或密码已经可见但自定义按钮还写着“显示密码”。发现冲突后，再选择保留原生行为或协调自定义控件。

离开页面、提交登录和重新打开表单时，也需要有清楚的可见性规则。不要把“上一次点过显示”保存成整个账号长期生效的偏好，使下一次登录默认暴露密码。普通显示切换不清空内容，认证失败后如何处理敏感字段则是另一项产品规则，两者不应混在同一个按钮事件中。

自动填充要分清已有密码和新密码

阅读工作台的登录页需要用户已有密码。设计交付中可以明确用户名字段与密码字段的含义，并与研发对应 username、current-password 等自动填充标记。进入注册或改密流程后，新密码字段应使用 new-password，不是继续索取当前密码。

MDN 的 autocomplete 文档解释了这几类标记的区别。它们帮助浏览器判断字段用途，但不是“任何设备都能自动填入”的保证。设计师需要为未填入、已填入和用户主动编辑后的状态留出一致的布局，而不是用一张填满内容的截图代表全部情况。

密码管理器可能在字段右侧放入口，系统也可能在键盘上方提供凭据建议。自定义眼睛按钮要给这些实际入口留出兼容空间；自动填入后，固定标签、错误说明和登录按钮不应消失。也不要要求用户必须先键入一个字符，登录按钮才识别到已有内容，这会破坏自动填充路径。

允许粘贴同样重要。WCAG 2.2 的可访问认证说明把密码管理器与复制粘贴列为减少记忆和重复输入负担的机制。禁用粘贴不能替代认证安全措施，却可能迫使用户手抄复杂密码。界面也不应在粘贴后悄悄删去空格、变更大小写，或截掉超出显示宽度的字符；显示空间不足与输入不合法是两回事。

触屏、键盘和读屏都能控制显示

鼠标悬停出现的提示不能独自解释移动端眼睛按钮。触屏用户没有稳定的悬停操作，因此动作名称需要能在触摸场景中被理解；如果采用按住显示、松开隐藏，还应提供同样可达的键盘操作，并处理手指滑出后的状态。对普通登录页，明确的点击切换通常更容易描述和维护。

显示按钮是一次界面操作，应使用按钮语义。根据 W3C 按钮模式，获得焦点的按钮可通过 Enter 或空格激活。在表单内还要避免把显示按钮误设成提交动作：按键只切换可见性，登录仍由独立的提交入口完成。

可访问名称也要与状态策略配套。一种方案采用“显示密码”和“隐藏密码”两个动作名称；另一种方案使用固定名称的切换按钮，并通过按下状态表达开关。不要把两套方式随意混合，例如名称已经改成“隐藏密码”，又把“已按下”当成同一个含义反复宣布。阅读工作台采用前一种动作名称，设计稿与开发说明保持一致。

用户通过键盘激活按钮后，不要为了让他继续输入就强行把焦点拉回输入框，否则下一次按键的作用会突然改变。让当前焦点清楚可见，并维持可预测的顺序；触控或鼠标点击后是否继续保留键盘输入位置，则应在具体设备上检查，不能把“光标位置”和“键盘焦点”当成同一个状态。

密码不对时，帮助恢复任务而不泄露内容

空字段可直接提示“请输入密码”，并让用户定位到输入位置。已经提交但认证未通过时，不要为了显得具体就告诉陌生访问者“这个邮箱存在，只是密码错了”。OWASP 的认证错误说明建议避免用不同响应泄露账号是否存在。可以用“账号或密码不正确”描述认证结果，并保留找回密码入口；网络不可用则应说明暂时无法完成登录，不要误报密码错误。

错误文案中不回显输入的密码，也不把明文写入埋点或错误截图。产品如果在认证失败后清空密码，应让用户看得出需要重新输入，同时仍可使用密码管理器。若某种失败允许保留当前输入，也应保持隐藏并说明可继续尝试的路径，不能用统一的“错误就清空整个表单”处理所有情况。

登录页不应临时套用最新注册规则，阻止已有账号提交过去合法创建的密码。创建新密码时才说明当前真实要求，是否需要重复确认也应按产品任务决定；显示密码是帮助核对输入的一个方式，不能代替完整的账号安全策略。

交付阅读工作台时，把显示按钮、字段值、自动填充和认证结果作为四个相互关联但不同的状态。用户应能顺畅完成这条路径：填入已有密码，按需查看，修正字符，再提交登录。每一步都保留可理解的动作与结果，一个小小的眼睛按钮才真正能帮上忙。