InputOtp (OTP 輸入)

Input Otp 用於輸入一次性密碼。

匯入 #


import InputOtp from 'primevue/inputotp';

基本 #

InputOtp 與 v-model 屬性一起使用，進行雙向值綁定。字元數由 length 選項定義，預設值為 4。


<InputOtp v-model="value" />

表單 #

InputOtp 與 PrimeVue 表單函式庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col gap-1">
        <InputOtp name="passcode" />
        <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

遮罩 #

啟用 mask 選項可隱藏輸入欄位中的值。


<InputOtp v-model="value" mask />

僅限整數 #

當存在 integerOnly 時，只能接受整數作為輸入。


<InputOtp v-model="value" integerOnly />

填滿 #

將 variant 屬性指定為 filled，以顯示具有比預設 outlined 樣式更高視覺強調的元件。


<InputOtp v-model="value" variant="filled" />

尺寸 #

InputOtp 提供 small 和 large 尺寸，作為基本尺寸的替代方案。


<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />

範本 #

使用您自己的 UI 元素定義範本，並將其綁定到提供的事件和屬性，以取代預設設計。


<InputOtp v-model="value">
    <template #default="{ attrs, events }">
        <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
    </template>
</InputOtp>

範例 #

使用範本和額外元素的 UI 實作範例。

驗證您的帳戶

請輸入發送到您手機的驗證碼。


<div class="flex flex-col items-center">
    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
    <InputOtp v-model="value" :length="6" style="gap: 0">
        <template #default="{ attrs, events, index }">
            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
            <div v-if="index === 3" class="px-4">
                <i class="pi pi-minus" />
            </div>
        </template>
    </InputOtp>
    <div class="flex justify-between mt-8 self-stretch">
        <Button label="Resend Code" link class="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>

可存取性 #

螢幕閱讀器

Input OTP 使用一組 InputText 元件，請參考 InputText 元件，以取得更多關於螢幕閱讀器支援的資訊。

鍵盤支援

按鍵	功能
tab	將焦點移至 OTP 輸入。
向右箭頭	將焦點移至下一個輸入元素。
向左箭頭	將焦點移至上一個輸入元素。
退格鍵	刪除輸入並將焦點移至上一個輸入元素。