Web Components Mask Input (マスク入力) の概要
Ignite UI for Web Components マスク入力は、構成可能なルールに基づいて、開発者がユーザー入力を制御し、表示される値を書式設定できるようにする入力フィールドです。入力オプションも構成できます。
Web Components マスク入力の例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
IgcMaskInputComponent を使用する前に、次のように登録する必要があります:
import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcMaskInputComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
マスクのルール
次の表は、サポートされている組み込みのマスク ルールを示しています:
| マスク文字 | 説明 |
|---|---|
| 0 | 数字文字 [0-9]。エントリは必須です。 |
| 9 | 数字文字 [0-9]。エントリはオプションです。 |
| # | 数字文字 [0-9]、正符号 (+) 、または負符号 (-) が必須。エントリは必須です。 |
| L | 通常の文字。エントリは必須です。 |
| ? | 通常の文字。エントリはオプションです。 |
| A | 英数字 (文字または数字) 文字。エントリは必須です。 |
| a | 英数字 (文字または数字) 文字。エントリはオプションです。 |
| & | 任意のキーボード文字。エントリは必須です。 |
| C | 任意のキーボード文字。エントリはオプションです。 |
| \ | マスク フラグをエスケープし、リテラルに変換します。 |
これらのフラグは、コンポーネントの検証にも参加します。つまり、必要な位置のすべてではなく一部が満たされている場合、入力は無効になります (位置が満たされていない / 空の値は、依然として required の責任です)。これは、スタンドアロンの入力とフォームに含まれる場合の両方に適用されます。
マスクの適用
マスクの適用は非常に簡単です。必要なことは、入力の mask プロパティに事前に決定されたパターンを提供することだけです。
以下の例では、内線番号付きの電話番号にマスクを適用します。
<igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999">
<igc-icon name="phone" slot="prefix"></igc-icon>
<span slot="helper-text">Phone number</span>
</igc-mask-input>
その後、ブラウザーに次のように表示されます:
プロンプト文字
開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、prompt プロパティに任意の文字を指定するだけです:
<igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999" prompt="-"></igc-mask-input>
デフォルトでは、prompt 文字はアンダースコアです。
プレースホルダー
開発者は、ネイティブ入力プレースホルダー属性の目的を果たす placeholder プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。
<igc-mask-input id="mask-input" mask="00/00/0000" placeholder="dd/MM/yyyy"></igc-mask-input>
値モード
IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために raw および withFormatting オプションを選択できる valueMode プロパティを公開します。デフォルトでは、valueMode は raw に設定されています。以下の例をご覧ください:
スタイル設定
IgcMaskInputComponent コンポーネントは IgcInputComponent コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。参考のために入力スタイル設定を参照してください。
仮定と制限
- マスクされた入力は、常にテキスト型の入力であるため、type 属性を公開しません。
- 元に戻す / やり直しの動作は現在サポートされていません。