React MaskInput | インフラジスティックス

React Mask Input (マスク入力) の概要

Ignite UI for React マスク入力は、構成可能なルールに基づいて、開発者がユーザー入力を制御し、表示される値を書式設定できるようにする入力フィールドです。入力オプションも構成できます。

React マスク入力の例

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrMaskInput, IgrIcon, IgrMaskInputModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrMaskInputModule.register();
IgrIconModule.register();

export default class MaskInputOverview extends React.Component<any, any> {

    public locationIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconLocationRef = this.iconLocationRef.bind(this);         
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrMaskInput mask="00000">
                    <span slot="prefix">
                        <IgrIcon ref={this.iconLocationRef} name="location" collection="material"></IgrIcon>
                    </span>
                    <span slot="helper-text">ZIP Code</span>
                </IgrMaskInput>
            </div>
        );
    }

    public iconLocationRef(icon: IgrIcon){
        if (!icon) { return; }
        this.locationIcon = icon;
        const locationIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="locationIconTitle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"> <title id="locationIconTitle">Location</title> <path d="M12,21 C16,16.8 18,12.8 18,9 C18,5.6862915 15.3137085,3 12,3 C8.6862915,3 6,5.6862915 6,9 C6,12.8 8,16.8 12,21 Z"/> <circle cx="12" cy="9" r="1"/> </svg>';
        this.locationIcon.registerIconFromText("location", locationIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MaskInputOverview/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

IgrMaskInput を使用する前に、次のように登録する必要があります:

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react
cmd

次に、以下のように、IgrMaskInput とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrMaskInput, IgrMaskInputModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrMaskInputModule.register();
tsx

<IgrMaskInput mask="00000">
    <span slot="prefix">
        <IgrIcon ref={this.iconLocationRef} name="location" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">ZIP Code</span>
</IgrMaskInput>
tsx

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

マスクのルール

次の表は、サポートされている組み込みのマスクルールを示しています:

マスク文字	説明
0	数字文字 [0-9]。エントリは必須です。
9	数字文字 [0-9]。エントリはオプションです。
#	数字文字 [0-9]、正符号 (+) 、または負符号 (-) が必須。エントリは必須です。
L	通常の文字。エントリは必須です。
?	通常の文字。エントリはオプションです。
A	英数字 (文字または数字) 文字。エントリは必須です。
a	英数字 (文字または数字) 文字。エントリはオプションです。
&	任意のキーボード文字。エントリは必須です。
C	任意のキーボード文字。エントリはオプションです。
\	マスクフラグをエスケープし、リテラルに変換します。

これらのフラグは、コンポーネントの検証にも参加します。つまり、必要な位置のすべてではなく一部が満たされている場合、入力は無効になります (位置が満たされていない / 空の値は、依然として required の責任です)。これは、スタンドアロンの入力とフォームに含まれる場合の両方に適用されます。

マスクの適用

マスクの適用は非常に簡単です。必要なことは、入力の mask プロパティに事前に決定されたパターンを提供することだけです。

以下の例では、内線番号付きの電話番号にマスクを適用します。

<IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
    <span slot="prefix">
        <IgrIcon ref={this.iconPhoneRef} name="phone" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">Phone number</span>
</IgrMaskInput>
tsx

その後、ブラウザーに次のように表示されます:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrMaskInput, IgrIcon, IgrMaskInputModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrMaskInputModule.register();
IgrIconModule.register();

export default class MaskInputApplyingMask extends React.Component<any, any> {

    public phoneIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.iconPhoneRef = this.iconPhoneRef.bind(this);         
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
                    <span slot="prefix">
                        <IgrIcon ref={this.iconPhoneRef} name="phone" collection="material"></IgrIcon>
                    </span>
                    <span slot="helper-text">Phone number</span>
                </IgrMaskInput>
            </div>
        );
    }

    public iconPhoneRef(icon: IgrIcon){
        if (!icon) { return; }
        this.phoneIcon = icon;
        const phoneIconText = '<svg width="24px" height="24px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="Слой_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M6.2478638,8.4810181C6.1535645,8.5752563,6.0301514,8.6223755,5.9067383,8.6223755   S5.6599121,8.5752563,5.5656128,8.4810181L3.5189819,6.4343872C3.4247437,6.3400879,3.3775635,6.2166748,3.3775635,6.0932617   s0.0471802-0.2468872,0.1414185-0.3411255l1.0233154-1.0233154L1.8134766,2l-0.682251,0.6821899   c-1.5083008,1.5083618-1.5083008,3.9494019,0,5.4577026l2.7288818,2.7288208   c0.3770752,0.3770752,0.812439,0.6599121,1.2769775,0.8484497C5.6015625,11.9057007,6.0952759,12,6.5889282,12   c0.4937134,0,0.9873657-0.0942993,1.4519043-0.2828369s0.8999023-0.4713745,1.2769775-0.8484497L10,10.1865234L7.2711792,7.4577026   L6.2478638,8.4810181z" fill="#1D1D1B"/><path d="M6.5,1H6v1h0.5C8.4296875,2,10,3.5703125,10,5.5V6h1V5.5C11,3.0185547,8.9814453,1,6.5,1z" fill="#1D1D1B"/><path d="M8,5.5V6h1V5.5C9,4.121582,7.878418,3,6.5,3H6v1h0.5C7.3271484,4,8,4.6728516,8,5.5z" fill="#1D1D1B"/></g></svg>';
        this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MaskInputApplyingMask/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

プロンプト文字

開発者は、マスクの塗りつぶされていない部分に使用されるプロンプトシンボルをカスタマイズできます。これを行うには、prompt プロパティに任意の文字を指定するだけです:

<IgrMaskInput mask="(####) 00-00-00 Ext. 9999" prompt="-"></IgrMaskInput>
tsx

デフォルトでは、prompt 文字はアンダースコアです。

プレースホルダー

開発者は、ネイティブ入力プレースホルダー属性の目的を果たす placeholder プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。

<IgrMaskInput mask="00/00/0000" placeholder="dd/MM/yyyy"></IgrMaskInput>
tsx

値モード

IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために raw および withFormatting オプションを選択できる valueMode プロパティを公開します。デフォルトでは、valueMode は raw に設定されています。以下の例をご覧ください:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, IgrMaskInputModule, IgrIconModule, IgrRadioGroupModule, IgrRadioModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrMaskInputModule.register();
IgrIconModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

export default class MaskInputValueModes extends React.Component<any, any> {

    public maskRef: IgrMaskInput;
    public fileIcon: IgrIcon;

    constructor(props: any) {
        super(props);
        this.onMaskRef = this.onMaskRef.bind(this);
        this.iconFileRef = this.iconFileRef.bind(this);
        this.state = {value: ""};   
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrMaskInput ref={this.onMaskRef} inputOcurred={(e)=>this.onInputChange(e)}>
                    <span slot="prefix">
                        <IgrIcon ref={this.iconFileRef} name="file" collection="material"></IgrIcon>
                    </span>
                </IgrMaskInput>

                <div id="content" style={{width: "100%", height: "inherit"}}>
                    <IgrRadioGroup alignment="horizontal" style={{marginBottom: "10px"}}>
                        <IgrRadio name="position" value="raw" label-position="after" change={(e)=>this.onRadioChange(e)} checked><span>raw</span></IgrRadio>
                        <IgrRadio name="position" value="withFormatting" label-position="after" change={(e)=>this.onRadioChange(e)}><span>withFormatting</span></IgrRadio>
                    </IgrRadioGroup>
                    
                    <span id="value-span">Value: {this.state.value}</span>
                </div>
            </div>
        );
    }

    public onMaskRef(mask: IgrMaskInput){
        if (!mask) { return; }
        this.maskRef = mask;
    }

    public onInputChange(event: any) {
        console.log(event)
        if (this.maskRef) {
            this.setState({value: this.maskRef.value})
        }
    }

    public onRadioChange(event: any) {
        if (this.maskRef) {
            this.maskRef.valueMode = event.value;
            this.setState({value: this.maskRef.value})
        }
    }

    public iconFileRef(icon: IgrIcon){
        if (!icon) { return; }
        this.fileIcon = icon;
        const fileIconText = '<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title/><g id="document"><polyline class="cls-1" points="25 9 25 29 7 29 7 3 16 3"/><line class="cls-1" x1="16" x2="25" y1="3" y2="9"/><line class="cls-1" x1="16" x2="16" y1="3" y2="9"/><line class="cls-1" x1="25" x2="16" y1="9" y2="9"/><line class="cls-1" x1="11" x2="16" y1="17" y2="17"/><line class="cls-1" x1="11" x2="20" y1="21" y2="21"/></g></svg>';
        this.fileIcon.registerIconFromText("file", fileIconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MaskInputValueModes/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

スタイル設定

IgrMaskInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

名前	説明
`container`	すべての主要な入力要素を保持するメインラッパー。
`input`	ネイティブ入力要素。
`label`	ネイティブラベル要素。
`prefix`	プレフィックスラッパー。
`suffix`	サフィックスラッパー。
`helper-text`	ヘルパーテキストラッパー。

igc-mask-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}
css

仮定と制限

マスクされた入力は、常にテキスト型の入力であるため、type 属性を公開しません。
元に戻す / やり直しの動作は現在サポートされていません。