InputMask 개요

InputMask 컨트롤을 통해 입력되는 사용자 입력의 유효성을 검사하고 형식을 지정할 수 있습니다. 이 컨트롤은 사용자가 실수로 잘못된 데이터를 입력하는 것을 방지하고 사용자가 입력할 때 리터럴(예: 날짜의 슬래시)을 건너뛰어 시간을 절약합니다.

입력의 유효성을 확인하는 데 사용되는 마스크는 mask 속성으로 정의되며, 여기에는 다음 특수 문자 중 하나 이상이 포함될 수 있습니다:

컨트롤의 주요 속성은 다음과 같습니다:

1. value: 사용자 입력과 템플릿 문자를 포함하여 컨트롤의 전체 텍스트 콘텐츠를 반환합니다.
2. rawValue: value 속성과는 달리, rawValue 속성을 통해 입력 문자만 포함하고 템플릿 문자는 제외한 컨트롤 값을 가져오거나 설정할 수 있습니다.
3. promptChar: 기본적으로, InputMask 컨트롤은 밑줄 문자를 사용하여 입력이 예상되는 위치를 나타냅니다. promptChar 속성에 새 문자열을 할당하여 이를 변경할 수 있습니다. 예시는 프롬프트 문자 데모를 참고하시길 바랍니다.
4. maskFull: 마스크가 완전히 채워졌는지의 여부를 나타냅니다. 예시는 InputMask Validation 데모를 참고하시길 바랍니다.

HTML

  <input id="thePhone"><br>

Javascript

import * as input from '@grapecity/wijmo.input';

function init() {
    let thePhone = new input.InputMask('#thePhone', {
        mask: '(999) 000-0000'
    });
}