输入掩码

InputMask 组件用于以特定格式输入，例如数字、日期、货币、电子邮件和电话。

导入#


import { InputMask } from 'primereact/inputmask';

基本用法#

InputMask 用作受控输入，具有 value 和 onChange 属性以及 mask 属性来定义掩码。


<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />

掩码#

掩码格式可以是以下定义的组合：a 代表字母字符，9 代表数字字符，* 代表字母数字字符。此外，还接受诸如 (、 )、- 之类的格式字符。

社保号码

电话号码

序列号


<label htmlFor="ssn" className="font-bold block mb-2">SSN</label>
<InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999"></InputMask>

<label htmlFor="phone" className="font-bold block mb-2">Phone</label>
<InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999"></InputMask>

<label htmlFor="serial" className="font-bold block mb-2">Serial</label>
<InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999"></InputMask>

可选#

当输入未完成掩码定义时，默认情况下会清除它。使用 autoClear 属性来控制此行为。此外，? 用于标记问号后的任何内容都是可选的。


<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999"  />

槽字符#

掩码的默认占位符是下划线，可以使用 slotChar 属性进行自定义。


<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />

浮动标签#

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

社保号码


<FloatLabel>
    <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
    <label htmlFor="ssn_input">SSN</label>
</FloatLabel>

填充#

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


<InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />

无效#

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


<InputMask invalid mask="99-999999" placeholder="99-999999" />

禁用#

当存在 disabled 时，该元素不能被编辑和聚焦。


<InputMask mask="99-999999" placeholder="99-999999" disabled />

无障碍#

屏幕阅读器

InputMask 组件渲染一个原生输入元素，该元素隐式包含任何传递的属性。用于描述组件的值可以通过与 id 属性结合使用的 label 标签或使用 aria-labelledby、 aria-label 属性提供。


<label htmlFor="date">Date</label>
<InputMask id="date" />

<span id="phone">Phone</span>
<InputMask aria-labelledby="phone" />

<InputMask aria-label="Age" />

键盘支持

键	功能
tab	将焦点移动到输入框。