MaskEdit 소개

MaskEdit은 정해진 형식으로 입/출력할 때 사용하는 Edit 계열의 컴포넌트입니다. 기본적인 모양이나 사용법은 Edit 컴포넌트와 유사하며 형식이 정해져 있는 주민등록번호, 전화번호, 날짜 등과 같은 정보를 다룰 때 특히 유용합니다.

MaskEdit을 사용하면 정해진 형식으로의 사용을 강제할 수 있어 입/출력 오류를 줄일 수 있고, 복잡한 문자열 처리 과정을 간단한 마스킹 처리로 대체할 수 있어 편리합니다.

MaskEdit은 type 속성에 따라 number 형식과 string 형식으로 설정할 수 있습니다. number 형식은 숫자 형식으로 입력받아 처리할 경우에 사용하고 string 형식은 문자열 형식으로 입력받아 처리할 수 있습니다.

또한, format 속성의 설정에 따라 입력 문자, 길이, 표시 형식 등을 필요에 따라 제한할 수 있습니다.

사용 예

아래는 어느 포털사이트의 개인 정보 조회 화면입니다. 개인 정보 보호를 위해 아이디, 도메인 주소, 전화번호의 일부를 별표(*)로 표시하거나, 번호의 앞에 지역 번호를 붙이는 등 다양한 형식으로의 입, 출력이 가능합니다.

MaskEdit 만들기

툴바에서 MaskEdit 을 선택한 후, 폼 위에 적당한 크기로 드래그하여 생성합니다. 컴포넌트를 선택 한 상태에서 폼 위에 클릭하면 기본 크기로 생성됩니다.

QuickView(Ctrl + F6)로 실행합니다. MaskEdit 생성 후 type 속성을 별도로 설정하지 않으면 'number'로 자동 설정되어 숫자와 부호만 입력할 수 있습니다.

정해진 형식으로 입력받기

format 속성과 type 속성의 설정에 따라 사용자를 정해진 특정 형식으로 입력하도록 유도할 수 있습니다.

예제

다음은 정해놓은 형식으로 입력할 수 있도록 하는 예제입니다.

sample_maskedit_02.xfdl

String 입력은 알파벳 4자리와 숫자 5자리를 입력받을 수 있습니다. MaskEdit 중간에 있는 공백과 하이픈은 마스크 설정에 정의되어 있어 사용자가 임의로 수정하거나 지울 수 없습니다. 마스크 설정은 다음과 같습니다.

aaaa - #####

Number 입력은 자리수 제한없는 정수와 소수점 3자리까지 입력받을 수 있습니다. 또 보기 편하도록 정수부 3자리마다 쉼표(,)를 표시해 줍니다. 마스크 설정은 다음과 같습니다.

#,#.###

예제에서 사용한 핵심 기능

type

MaskEdit에 입력되는 문자 형식을 설정하는 속성입니다. 'number'와 'string' 중 하나로 설정할 수 있는데 아무 설정도 하지 않을 경우 'number'로 동작합니다.

format

입력받은 문자에 적용할 마스크 형식을 설정하는 속성입니다. 마스크 형식을 설정할 때는 다음과 같은 기호를 조합해 사용합니다. 마스크 기호는 type 속성의 설정에 따라 달리 동작할 수 있으므로 유의하십시오.

this.MaskEdit00.set_format( "@@@@" );
this.MaskEdit00.set_format( "###,000.00##" );
this.MaskEdit00.set_format( "999,000.0099" );

예제 구현 방법

MaskEdit , Static 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

문자 4자리, 하이픈(-), 숫자 5자리를 입력받도록 속성을 설정합니다.

소수점 3자리까지 표시할 수 있는 숫자를 입력받고 정수부 세 자리마다 쉼표(,)를 표시하도록 속성을 설정합니다.

QuickView(Ctrl + F6)로 실행한 후 문자열을 입력하여 예제와 같이 입, 출력되는지 확인합니다.

주민등록번호 안 보이게 처리하기

주민등록번호와 같은 개인 정보는 타인이 볼 수 없게 보호 처리가 필요합니다. MaskEdit의 format 속성을 사용하면 타인이 알아볼 수 없도록 손쉽게 보호 처리가 가능합니다.

예제

주민등록번호를 안 보이게 처리할 때 모든 숫자를 별표 처리하면 올바르게 입력했는지 확인할 수 없습니다. 숫자의 일부분을 사용자가 확인할 수 있도록 표시해 주면 입력 오류를 줄일 수 있습니다.

sample_maskedit_03.xfdl

예제에서 사용한 핵심 기능

type

MaskEdit에 입력되는 문자 형식을 설정하는 속성입니다. 'number'와 'string' 중 하나로 설정할 수 있는데 아무 설정도 하지 않으면 'number'로 동작합니다.

format

입력받은 문자에 적용할 마스크 형식을 설정하는 속성입니다. 마스크 형식을 설정할 때는 다음과 같은 기호를 조합해 사용합니다. 마스크 기호는 type 속성의 설정에 따라 달리 동작할 수 있으므로 유의하십시오.

this.MaskEdit00.set_format( "@@@@" );
this.MaskEdit00.set_format( "###,000.00##" );
this.MaskEdit00.set_format( "999,000.0099" );

예제 구현 방법

MaskEdit 를 예제의 그림과 같이 적절히 배치합니다.

앞의 생년월일 숫자 6자리, 하이픈(-) 그리고 뒤의 표시되는 숫자 1자리, 표시되지 않는 숫자 6자리를 입력받기 위해 다음과 같이 설정합니다. 표시되지 않는 숫자는 중괄호({ })로 감싸서 입력합니다.

QuickView(Ctrl + F6)로 실행한 후 문자열을 입력하여 예제와 같이 입, 출력되는지 확인합니다.