InputMaskコンポーネントは、数値、日付、通貨、メール、電話など、特定の形式で入力をするために使用されます。
import InputMask from 'primevue/inputmask';
InputMaskはv-modelプロパティを持つ制御された入力として使用されます。
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
マスク形式は、次の定義の組み合わせにすることができます。aはアルファベット文字、9は数字文字、*は英数字です。さらに、(、)、-のようなフォーマット文字も使用できます。
<div class="flex-auto">
<label for="ssn" class="font-bold block mb-2">SSN</label>
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
</div>
<div class="flex-auto">
<label for="phone" class="font-bold block mb-2">Phone</label>
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
</div>
<div class="flex-auto">
<label for="serial" class="font-bold block mb-2">Serial</label>
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
</div>
入力がマスク定義を完了しない場合、デフォルトでクリアされます。この動作を制御するには、autoClearプロパティを使用してください。さらに、?は疑問符以降のすべてをオプションとしてマークするために使用されます。
<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
マスクのデフォルトのプレースホルダーはアンダースコアで、slotCharプロパティを使用してカスタマイズできます。
<InputMask id="basic" v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
フォーカスすると、入力フィールドの上にフローティングラベルが表示されます。詳細については、FloatLabelドキュメントを参照してください。
<FloatLabel>
<InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
<label for="ssn">SSN</label>
</FloatLabel>
コンポーネントをデフォルトのアウトラインスタイルよりも視覚的に強調して表示するには、variantプロパティをfilledとして指定します。
<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
無効状態は、検証の失敗を示すためにinvalidプロパティを使用して表示されます。フォーム検証ライブラリと統合する場合、このスタイルを使用できます。
<InputMask v-model="value" mask="99-999999" placeholder="99-999999" :invalid="value ===''" />
disabledが存在する場合、要素は編集およびフォーカスできません。
<InputMask mask="99-999999" placeholder="99-999999" disabled />
InputMaskコンポーネントは、渡されたプロパティを暗黙的に含むネイティブのinput要素をレンダリングします。コンポーネントを説明する値は、idプロパティと組み合わせたlabelタグを使用するか、aria-labelledby、aria-labelプロパティを使用して提供できます。
<label for="date">Date</label>
<InputMask id="date" />
<span id="phone">Phone</span>
<InputMask aria-labelledby="phone" />
<InputMask aria-label="Age" />
| キー | 機能 |
|---|---|
| tab | 入力をフォーカスします。 |