InputOtp

Input Otpは、ワンタイムパスワードを入力するために使用されます。

インポート # 


import InputOtp from 'primevue/inputotp';

基本 #

双方向の値バインディングは、v-modelを使用して定義されます。文字数は、デフォルトで4に設定されているlengthプロパティで定義されます。


<InputOtp v-model="value" />

マスク #

入力フィールドの値を非表示にするには、maskオプションを有効にします。


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

整数のみ #

integerOnlyが存在する場合、入力として受け入れることができるのは整数のみです。


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

テンプレート #

デフォルトのデザインを置き換えるには、提供されたイベントと属性にバインドされた独自の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コンポーネントを参照してください。

キーボードサポート

キー機能
tabInput otpにフォーカスを移動します。
右矢印次の入力要素にフォーカスを移動します。
左矢印前の入力要素にフォーカスを移動します。
バックスペース入力を削除し、前の入力要素にフォーカスを移動します。
PrimeVue 3 on Vue 3 by PrimeTek