DHTML 개체들에 마스크된 편집 비헤이버를 제공한다.

script object.style.behavior="url('mask.htc')";
object.addBehavior("mask.htc");
HTML <INPUT style="behavior:url('mask.htc')" id=idVal>
XML 없음
특기

window.onload 이벤트가 발생되기 전에는 스크립트로 아래 속성이나 이벤트에 접속할 수 없다. 문서가 완전히 로딩되고, onload 이벤트가 발생되면 해당 페이지의 비헤이버가 적용되고, 모든 속성, 메서드, 이벤트를 스크립트로 사용할 수 있다. 이벤트 발생전에 스트립트로 개체에 접속을 시도하면 스트립트는 그 속성이 개체에서 지원되지 않는다는 오류를 발생시킨다.

mask 편집 비헤이버는 input 엘레멘트에 적용되고, 제한된 입력과 양식화된 출력을 위한 입력할 수 있다. 정보가 입력되면 입력사항이 디스플레이되고, 틀린 입력을 알려준다. 이 비헤이버는 사전에 설정된(preset) 양식을 통하여 마스크된 양식에따라 일자, 시간, 전화번호등 여러가지 입력 필드에 사룡될 수 있다.


attribute property 설명
preset mask 비헤이버에서 입력 유지 마스크를 반환하거나 설정한다.

이벤트 설명
onerror mask 비헤이버에서 읽기 전용 속성에 값을 할당하거나 속성값에 유효하지 않은 값이 할당되면 발생된다.

적용
개체 IE
<INPUT style="behavior:url('mask.htc')" id=idVal> IE5(win32,unix)

onsave로 즐겨찾기에 저장되고 onload 이벤트처리자로 문서로 로딩된다. setAttribute 메서드로 다른 개체들을 포함아여 입력 개체와 그 값을 즐겨찾기에 유지를 설정한다. 값이 유지되기 위해서는 클라스로 지정된 class="mask"이어야 한다.

<BUTTON
  onclick="window.open('../behavior/exp/wmask.html','_new','width=460,height=380')">예제 보조창 열기
</BUTTON>

exp/wmask.html 코드
<!DOCTYPE html public "-//w3c//dtd html 4//en">
<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 비헤비어(behavior) - Mask 비해이버 예제</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<LINK rel="stylesheet" type="text/css" href="../../public/jscript.css">
<META name="save" content="history">
<STYLE>
.mask{ behavior:url("../../behavior/exp/mask.htc");color:brown;font-weight:bold;font-size:11pt:}
</STYLE>
</HEAD>

<BODY>
<TABLE width=440>
<TR><TD>
<DIV style="border:solid 1 blue;background:fff;text-align:center;width:100%;margin:5">
<H3><SPAN class=titleblue><SPAN class=behavior>mask</SPAN> 비해이버 예제</SPAN></H3>
</DIV>
<TABLE>
<COL style=color:navy><COL style=color:blue><COL style=color:teal>
<TR><TD>짧은 일자:</TD><TD><INPUT type="text" class="mask" preset="shortdate"></TD><TD>11/12/2004</TD></TR>
<TR><TD>중간 일자:</TD><TD><INPUT type="text" class="mask" preset="mediumdate"></TD><TD>12/Nov/2004</TD></TR>
<TR><TD>긴 일자:</TD><TD><INPUT type="text" class="mask" preset="longdate"></TD><TD>December/11/2004</TD></TR>
<TR><TD>화폐:</TD><TD><INPUT type="text" class="mask" preset="currency"></TD><TD>$3,000.00</TD></TR>
<TR><TD>백분율:</TD><TD><INPUT type="text" class="mask" preset="percent"></TD><TD>12%</TD></TR>
<TR><TD>우편 번호:</TD><TD><INPUT type="text" class="mask" preset="zip"></TD><TD>123-123</TD></TR>
<TR><TD>전화 번호:</TD><TD><INPUT type="text" class="mask" preset="area" size="6">-
<INPUT type="text" class="mask" preset="phone" size="12"></TD><TD>(031) 1234-1234</TD></TR>
</TABLE>
</FORM>
<P align=center style="background:ffa;padding:10;">
우측 예제에 상응하게 입력하고 초점을 이동시켜보라.</P><BR>
<TABLE cellpadding=8 align=center style="border:solid 1 blue">
<TR><TD align=center><BUTTON onClick="self.close()">현재 보조창 닫기</BUTTON></TD></TR>
</TABLE>
</TD></TR></TABLE>
</BODY>
</HTML>