입력마스크
InputMask 개요
InputMask 컨트롤을 사용하여 입력 시 사용자 입력의 유효성을 검사하고 형식을 지정할 수 있습니다. InputMask 컨트롤은 사용자가 실수로 잘못된 데이터를 입력하는 것을 방지하고 사용자가 입력하는 대로 리터럴(예: 날짜의 슬래시)을 건너뛰어 시간을 절약합니다.
입력 유효성 검사에 사용되는 마스크는 mask 속성에 의해 정의되며, 다음 특수 문자 중 하나 이상을 포함할 수 있습니다.
문자 | 마스크 유형 |
---|---|
0 | 숫자. |
9 | 숫자 또는 공백. |
# | 숫자, 부호 또는 공백. |
L | 문자. |
l | 문자 또는 공백. |
A | 글자와 숫자. |
a | 글자와 숫자 또는 공백. |
. | 지역화된 소수점. |
, | 지역화된 천(1000) 구분자. |
: | 지역화된 시간 구분자. |
/ | 지역화된 날짜 구분자. |
$ | 지역화된 통화 부호. |
< | 다음 문자를 소문자로 변환. |
> | 다음 문자를 대문자로 변환. |
\ | 문자를 리터럴로 변환하여 이스케이프(escape). |
9 | 2바이트 문자 세트(DBCS) 숫자. |
J | 2바이트 문자 세트(DBCS) 히라가나. |
G | 2바이트 문자 세트(DBCS) 대 히라가나a. |
K | 2바이트 문자 세트(DBCS) 가타카나. |
N | 2바이트 문자 세트(DBCS) 대 가타카나. |
K | 일바이트 문자집합(SBCS) 가타카나. |
N | 일바이트 문자집합(SBCS) 대 가타카나. |
Z | 임의의 2바이트 문자 세트(DBCS) 문자. |
H | 임의의 일바이트 문자집합(SBCS) 문자. |
All others | 리터럴. |
The main properties of the control include:
- value: 사용자 입력 및 템플릿 문자를 포함하여 컨트롤의 전체 텍스트 내용을 반환합니다.
- rawValue: 값 속성과는 대조적으로 rawValue 속성을 사용하여 템플릿 문자를 제외하고 입력 문자만 포함하는 컨트롤 값을 가져오거나 설정할 수 있습니다.
- promptChar: 기본적으로 InputMask 컨트롤은 밑줄 문자를 사용하여 입력이 예상되는 위치를 나타냅니다. promptChar 속성에 새 문자열을 할당하여 변경할 수 있습니다. 예시는 프롬프트 문자 데모에서 확인이 가능합니다.
- maskFull: 마스크가 완전히 채워졌는지 여부를 나타냅니다. 예제는 입력 마스크 유효성 검사 데모를 참조하시길 바랍니다.
<input id="thePhone"><br>
import * as input from '@grapecity/wijmo.input';function init() {let thePhone = new input.InputMask('#thePhone', {mask: '(999) 000-0000'});}