InputOtp

InputOtp 将一组内容分组在选项卡中。

导入#


import { InputOtp } from 'primereact/inputotp';

基本#

字符数由 length 属性定义，默认设置为 4。


<InputOtp value={token} onChange={(e) => setTokens(e.value)}/>

掩码#

启用 mask 选项以隐藏输入字段中的值。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>

仅限整数#

当存在 integerOnly 时，只能接受整数作为输入。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>

模板#

使用您自己的 UI 元素定义一个模板，其中绑定了提供的事件和属性，以替换默认设计。


<InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>

示例#

一个使用模板和附加元素的 UI 实现示例。

验证您的帐户

请输入发送到您手机的代码。


<div className="flex flex-column align-items-center">
    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
    <div className="flex justify-content-between mt-5 align-self-stretch">
        <Button label="Resend Code" link className="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>

可访问性#

屏幕阅读器

Input OTP 使用一组 InputText 组件，有关屏幕阅读器支持的更多信息，请参阅 InputText 组件。

键盘支持

按键	功能
tab	将焦点移动到输入 otp。
右箭头	将焦点移动到下一个输入元素。
左箭头	将焦点移动到上一个输入元素。
退格键	删除输入并将焦点移动到上一个输入元素。