React Mask Input Overview

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

    React Mask Input Example

    Usage

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrMaskInput 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrMaskInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    Mask Rules

    아래 표에는 지원되는 기본 제공 마스크 규칙이 나와 있습니다.

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

    이 플래그는 컴포넌트 검증에도 참여하는데, 즉 일부 필수 위치가 채워지지 않으면 입력이 무효가 됩니다(채워지지 않은 위치나 빈 값은 여전히 책임required이 있습니다). 이는 독립형 입력과 폼에 포함될 때 모두 적용됩니다.

    Applying Mask

    마스크 착용은 꽤 간단합니다. 입력의 속성에mask 미리 정해진 패턴만 제공하면 됩니다.

    아래 예에서는 내선 코드가 포함된 전화번호에 마스크를 적용하겠습니다.

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

    그 후에는 브라우저에 다음이 표시되어야 합니다.

    Prompt Character

    개발자는 마스크의 미완성 부분에 사용되는 프롬프트 심볼을 맞춤 설정할 수 있습니다. 이를 위해 단순히 속성에prompt 원하는 문자를 제공하면 됩니다:

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

    기본적으로 캐릭터는prompt​ ​밑줄로 표시됩니다.

    Placeholder

    개발자는 네이티브 입력 자리 표시자 속성의 목적을 충족하는 이 속성을 활용placeholder 할 수도 있습니다. 자리 표시자에 대한 값이 제공되지 않으면 마스크 값이 그 값으로 사용됩니다.

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

    Value Modes

    그IgrMaskInput 폭로하는valueMode 선택할 수 있는 속성raw 그리고withFormatting 특정 마스크가 적용될 때 폼에서 어떤 입력값(포맷된 값인지 RAW)을 바인딩할지 설정할 수 있는 옵션들입니다. 기본적으로,valueMode는 다음과 같이 설정되어 있습니다.raw. 아래 예에서 직접 시도해 보세요.

    Styling

    컴포넌트는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);
}

    Assumptions and limitations

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

    API References

    Additional Resources