SilentDev

웹 어플리케이션을 작성할 때 사용자에게 데이터를 입력받기 위해서 텍스트박스를 흔히 사용하게 된다. 경우에 따라서는 날짜와 같은 특정한 포멧의 데이터를 받아야 하는 경우도 있다. 날짜의 경우 지정된 포멧이 다르거나 범위를 벗어날 경우 오류가 날 수 있기 때문에 반드시 포멧에 맞게 입력받아야 하지만, 사용자에게 이 간단한 포멧을 정상적으로 입력하게 하는건 무리가 있다. 그래서 텍스트박스에 직접 입력하지 못하게 하고 달력에서 선택하도록 하는 방식을 많이 사용한다. 날짜는 이처럼 달력을 선택해서 입력받도록 할 수있지만, 금액을 입력하는건 그렇지도 못하도, 사용자가 직접 입력해야하는데, 금액이 커지면 지금입력한 금액이 1억인지 10억인지 분간하기 쉽지 않다. 자리수 하나가 엄청난 금액의 차이를 보이기 때문에 조심해야 한다. 텍스트박스에 콤마가 자동으로 추가되어 100,000,000 처럼 1억의 중간중간에 콤마가 들어가면 사용자가 실수할 일이 많이 줄어들게 되고 시스템의 신뢰도도 더욱 높아질 것이다.

이번에 소개할 MaskedEditExtender는 바로 이러한 포멧을 미리 정의하고 그 포멧에 맞게 입력할 수 있도록 텍스트박스에 추가적인 기능을 부여한다.

MaskedEditExtender 속성

TargetControlID - MaskedEditExtender를 적용할 텍스트박스의 ID
MaskType - 텍스트박스에 적용할 유효 타입
 None - 유형 없음.
 Number - 숫자 유형
 Date - 날짜 유형
 Time - 시간 유형
 DateTime - 날짜와 시간 유형
Mask - 문자와 제한자를 활용하여 입력받을 유형을 정의한다.
 다음은 문자와 제한자의 설명이다.
 9 - 숫자만 입력
 L - 문자만 입력
 $ - 문자와 공백만 입력
 C - 사용자 지정 문자만 입력
 A - 문자와 사용자 지정 문자만 입력
 N - 숫자와 사용자 지정 문자만 입력
 ? - 모든 문자 입력 가능

 / - 날짜 구분자
 : - 시간 구분자
 . - 소수 구분자
 , 1000단위 구분자
\ - 선언된 구분자를 사용하기 위해 구분자 앞에 사용하는 특수문자
 { - 선언된 문자형식코드의 반복을 나타내기위한 특수문자(시작)
 } - 선언된 문자형식코드의 반복을 나타내기위한 특수문자(끝)

AcceptAMPM - AM/PM표시를 할 것인지 여부 정의, MaskType이 Time나 DateTime로 선언되어야 표시되며, 지역설정의 영향을 받는다.
AcceptNegative - 음수부호의 사용여부를 나타낸다.
 None - 음수부호를 표시하지 않는다.
 Left - 음수부호를 왼쪽에 표시한다.
 Right - 음수보호를 오른쪽에 표시한다.
AutoComplete - MaskType에 따라 텍스트박스에 입력하지 않은 나머지 빈값을 자동으로 채워준다.
 MaskType="Number" - 자동으로 빈값에 0을 채운다.
 MaskType="Time" - 자동으로 빈값에 현재 시간을 채운다. 단, 시간은 분단위 까지만 채운다.
 MaskType="Date" - 자동으로 빈값에 현재 날짜를 채운다.
 MaskType="DateTime" - 자동으로 빈값에 현재 날짜와 시간을 채운다. 단, 시간은 분단위 까지만 채운다.
AutoCompleteValue - AutoComplete이 사용가능한 상태에서 기본 문자열을 선언한다.
ClearMaskOnLostFocus - 텍스트박스에서 포커스를 잃었을 경우, 마스크를 유지할 것인지를 선언한다.
 true - 입력을 완료하지 않고 포커스가 벗어나면, 텍스트박스에서 마스크를 지운다.
 false - 입력을 완료하지 않고 포커스가 벗어나도 텍스트박스에서 마스크는 유지된다.
ClearTextOnInvalid - 유효성검사에서 실패할 경우, 텍스트박스의 값을 지울것인지(true), 유지할 것인지(false)를 선언한다. 기본값은 false이다.
ClipboardEnabled - 클립보드에 복사하기/붙여넣기의 허용여부를 선언한다. 하지만, ture/false 설정이 실제로 영향을 미치지는 않고, 브라우저 별 결과가 다르게 나타난다.
 Internet Explorer - 클립보드 엑세스 허용을 하면 ture/false에 관계없이 텍스트박스에 바로 붙여넣기가 가능하다. 클립보트 엑세스를 허용하지 않으면 붙여넣기 할 수 없다.
 Fire Fox - true/false에 관계없이 붙여넣기 시 기본 프롬프트창이 뜨고, 이 프롬프트 창에 입력한 값이 텍스트박스에 입력된다.
 Safari - true/false에 관계없이 붙여넣기를 사용할 수 없다. 프롬프트창도 뜨지 않는다.
ClipboardText - 텍스트박스에 붙여넣기 할 때 프롬프트창이 뜨게 되는데, 이 프롬프트창의 텍스트를 선언한다. 붙여넣기할때, 프롬프트창은 파이어폭스에서만 생성된다.
DisplayMoney - 해당 지역의 통화 기호를 표기한다.
 None - 통화 기호를 표기하지 않는다.
 Left - 통화 기호를 왼쪽에 표기한다.
 Right - 통화 기호를 오른쪽에 표기한다.
ErrorTooltipCssClass - 에러 툴팁 메시지에 적용할 CSS Class
ErrorTooltipEnabled - 에러 툴팁의 사용여부 선언, 유효성 오류가 발견된 텍스트 박스에 마우스가 올라갈 경우 툴팁이 표시된다.(단, MaskedEditValidator의 InvalidValueMessage를 선언하지 않으면 에러 메시지는 표시되지 않는다.)
InputDirection - 텍스트의 입력 방향 선언
 LeftToRight - 왼쪽에서 오늘쪽으로
 RightToLeft - 오른쪽에서 왼쪽으로
MessageValidatorTip - 텍스트박스에 커서가 이동하면, 툴팁 메시지를 표시한다. 기본값은 true(단, MaskedEditValidator의 TooltipMessage를 선언하지 않으면 툴팁 메시지는 표시되지 않는다.)
PromptCharacter - 입력되지 않은 Mask 문자 선언, 선언하지 않으면 기본적으로 언더바(_)가 된다.
UserDateFormat - 날짜 포멧 선언
UserTimeFormat - 시간 포멧 선언

이상으로 MaskedEditExtender의 속성을 알아보았다. MaskedEditExtender는 MaskedEditValidator와 함께 사용할 수 있는데(ErrorTooltipEnabled,MessageValidatorTip 등) 2부에서는 MaskedEditValidator에 대해서 알아보도록 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

DropDownList, ListBox에서 값이 찾기위해서는 마우스로 드래그해서 선택을 하거나 키보드의 화살표로 이동하여 선택을 한다. 혹은 알파벳의 경우 앞글짜를입력해서 해당 위치까지 이동한 후 거기서 부터 원하는 값을 찾기도 한다. 이번에 소해할 ListSearchExtender는 DropDownList나 ListBox를 앞문자만 키보드로 검색할 수 있는 기능이 아니라 전체 문자를 키보드로 검색할 수 있는 기능을 제공한다. 예를들어, 전 세계의 국가가 영문으로 DropDownList에 있고 이중에서 korea를 선택한다면, 키보드로 이동하기 위해서는 화살표방향으로 A부터 아래로 쭉 이동해서 korea를 찾아야 한다. 아니면, 키보드의 'K'를 입력하고 그 위치부터 korea를 찾을 수도 있다. 하지만, 키보드로 'K'를 입력하고 다시 'O'를 입력하면 DropDownList에서 다시 O로 시작하는 값의 위치로 이동해 버린다.