React MaskInput | Infragistics

React Mask 입력 개요

Ignite UI for React Mask Input은 개발자가 구성 가능한 규칙에 따라 사용자 입력을 제어하고 표시되는 값의 형식을 지정할 수 있는 입력 필드입니다. 다양한 입력 옵션을 제공하고 사용 및 구성이 용이합니다.

React Mask 입력 예제

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

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

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>';

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

    constructor(props: any) {
        super(props);
        registerIconFromText("location", locationIconText, "material");
    }

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

// 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 install igniteui-react
cmd

그런 다음 필요한 CSS를 IgrMaskInput 가져오고 다음과 같이 모듈을 등록해야 합니다.

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], 더하기(+) 또는 빼기(-) 기호입니다. 입력이 필요합니다.
엘	편지 문자. 입력이 필요합니다.
?	편지 문자. 입력은 선택사항입니다.
ㅏ	영숫자(문자 또는 숫자) 문자입니다. 입력이 필요합니다.
ㅏ	영숫자(문자 또는 숫자) 문자입니다. 입력은 선택사항입니다.
&	모든 키보드 문자. 입력이 필요합니다.
씨	모든 키보드 문자. 입력은 선택사항입니다.
\	마스크 플래그를 이스케이프하여 리터럴로 바꿉니다.

이러한 플래그는 구성 요소 유효성 검사에도 참여합니다. 즉, 필수 위치 중 일부가 채워지지 않은 경우 입력이 유효하지 않게 됩니다(채워진 위치가 없거나 비어 있는 값은 여전히 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, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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>';

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

    constructor(props: any) {
        super(props);
        registerIconFromText("phone", phoneIconText, "material");
    }

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

// 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

가치 모드

IgrMaskInput 특정 withFormatting 마스크가 valueMode 적용될 때 폼에 바인딩할 입력 값(formatted 또는 raw)을 구성할 수 있는 옵션과 옵션 중에서 raw 선택할 수 있는 속성을 노출합니다. 기본적으로 valueMode는 raw로 설정됩니다. 아래 예에서 직접 시도해 보십시오.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, IgrMaskInputModule, IgrIconModule, IgrRadioGroupModule, IgrRadioModule, registerIconFromText } 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;

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

        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>';
        registerIconFromText("file", fileIconText, "material");
    }

    public render(): JSX.Element {
        return (
            <div className="container sample center">
                <IgrMaskInput ref={this.onMaskRef} onInput={(e)=>this.onInputChange(e)}>
                    <span slot="prefix">
                        <IgrIcon 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" onChange={(e)=>this.onRadioChange(e)} checked><span>raw</span></IgrRadio>
                        <IgrRadio name="position" value="withFormatting" label-position="after" onChange={(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.detail.value;
            this.setState({value: this.maskRef.value});
        }
    }
}

// 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

가정 및 제한 사항

마스킹된 입력은 유형 속성은 항상 유형의 입력이므로 텍스트.
실행 취소/다시 실행 동작은 현재 지원되지 않습니다.