密码

密码字段显示密码强度指示器。

导入#


import { Password } from 'primereact/password';

基本#

密码组件通过 value 和 onChange 属性用作受控组件。默认启用强度计，因此基本密码输入需要将 feedback 设置为 false。


<Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />

强度计#

在输入值时，强度计会显示为弹出窗口。


<Password value={value} onChange={(e) => setValue(e.target.value)} />

本地化#

标签在组件级别通过 promptLabel、weakLabel、mediumLabel 和 strongLabel 属性进行翻译。为了对应用程序中的所有密码组件应用全局翻译，请参考本地化 API。


<Password value={value} onChange={(e) => setValue(e.target.value)}
    promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>

切换掩码#

当存在 toggleMask 时，会显示一个图标以将值显示为纯文本。


<Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />

模板#

使用 header 和 footer 属性将自定义内容放置在弹出窗口内。


<Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />

浮动标签#

当聚焦时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问浮动标签文档。

密码


<FloatLabel>
    <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="password">Password</label>
</FloatLabel>

填充#

将 variant 属性指定为 filled，以使用比默认 outlined 样式更高的视觉强调来显示组件。


<Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />

无效#

无效状态使用 invalid prop 显示，以指示验证失败。当与表单验证库集成时，可以使用此样式。


<Password invalid />

禁用#

当存在 disabled 时，无法编辑和聚焦该元素。


<Password disabled placeholder="Disabled" />

可访问性#

屏幕阅读器

用于描述组件的值可以通过 label 标签与 id prop 组合提供，也可以使用 aria-labelledby、aria-label props 提供。屏幕阅读器会在输入时使用具有 aria-live 的部分通知密码强度的变化。


<label htmlFor="pwd1">Password</label>
<Password id="pwd1" />

<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />

<Password aria-label="Password"/>

键盘支持

按键	功能
tab	将焦点移动到输入框。
escape	如果打开，则隐藏强度计。