작성자

freewebkorea

카테고리

비밀번호

제목

<H2>Form Event</H2>
<P class=mtext>Form Event란 입력란에 커저가 들어가거나(focus) 빠져 나가거나(blur), 또는 단추를 눌러서 입력한 데이터를 전송(submit)하거나 할 때 생기는 동작을 이용하여 필요한 기능을 JavaScript로 실행하게 만드는 것을 말 합니다. 간단한 예를 들면 아래의 왼쪽 입력한 처럼 "검색어를 입력해 주세요." 라는 안내 문구를 넣는 것 까지는 좋은데 마우스로 커저를 입력란에 집어 넣었을 때 검색어를 입력하기 위해서 "검색어를 입력해 주세요." 라는 문장을 지워야 된다는 거져. 하지만 오른쪽 입력란은 커저가 들어가면 문장 전체가 선택되기 때문에 지울 필요 없이 바로 검색어를 입력할 수 있다는 겁니다. 바로 이런 Control에 Form Event를 사용하게 됩니다.<BR><BR><INPUT size=30 value="검색어를 입력해 주세요.">&nbsp;&nbsp; <INPUT onfocus=this.select() size=30 value="검색어를 입력해 주세요."><BR><BR>다음은 Form Event의 종류 입니다.</P>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Form Event</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCellShort width="20%">
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>onFocus</TD>
<TD>입력란에 커저가 들어 가는 순간 또는 마우스 커저로 브라우저 창(body)을 클릭하여 커저가 들어 가는 순간</TD></TR>
<TR>
<TD>onBlur</TD>
<TD>입력란에 커저가 빠져 나오는 순간 또는 마우스 커저가 브라우저 창(body)을 빠져 나가는 순간</TD></TR>
<TR>
<TD>onSubmit</TD>
<TD>submit Button을 눌러서 입력 테이터를 전송하는 순간</TD></TR>
<TR>
<TD>onReset</TD>
<TD>Reset button을 눌러서 입력 양식을 초기화하는 순간</TD></TR>
<TR>
<TD>onChange</TD>
<TD>Drop down box 목록 중에 하나를 선택하는 순간</TD></TR></TBODY></TABLE><BR><BR>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Form Method</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCell width="20%">
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>focus()</TD>
<TD>지정하는 곳에 커저 넣기</TD></TR>
<TR>
<TD>select()</TD>
<TD>지정하는 문자열을 선택</TD></TR>
<TR>
<TD>submit()</TD>
<TD>입력 데이터 전송</TD></TR>
<TR>
<TD>reset()</TD>
<TD>입력 데이터 초기화</TD></TR></TBODY></TABLE><BR><BR><A name=#blur_focus></A>
<HR class=grayHr>
<BR><B>onfucus &amp; onblur</B> 
<P class=mtext>onfocus는 input, textarea 등의 입력란에 커저가 들어 가는 순간을 뜻하고, onblur는 입력란에 들어 갔던 커저가 입력란에서 빠져 나오는 순간을 말합니다. 아래의 입력란에 커저를 넣었다가 빼 보세요.</P><INPUT onblur="this.value='focus를 잃었습니다. 이 입력란은 blur 상태가 되었습니다.';alert(this.value);this.value='여기에 커저를 넣어 보세요.';" onfocus="this.value='focus가 생겼습니다. 이번엔 입력란 밖을 클릭하세요.';" size=60 value="여기에 커저를 넣어 보세요." name=focusing><BR><BR><B>Source code</B> 
<DIV class=input>&lt;input type="text" name="focusing" value="여기에 커저를 넣어 보세요." size="60" <B>onfocus</B>="this.value='focus가 생겼습니다. 이번엔 입력란 밖을 클릭하세요.';" <B>onblur</B>="this.value='focus를 잃었습니다. 이 입력란은 blur 상태가 되었습니다.';alert(this.value);this.value='여기에 커저를 넣어 보세요.';" /&gt; </DIV><BR><BR><B>select() Method</B> 
<P class=mtext>select Method는 입력란에 있는 문자열을 선택하게 해 주는 Method로서 위의 예 처럼 입력란에 커저가 들어가는 순간(onfocus) 문자열 전체가 선택됩니다. 또 focus를 읽으면(onblur) 'blur 상태가 되었습니다.' 라는 경고창을 띄우게 됩니다. </P><INPUT onblur="alert('blur 상태가 되었습니다.');" onfocus=this.select() size=60 value="커저를 넣어서 focus가 생기면 전체가 선택 됩니다." name=selecting><BR><BR><B>Source code</B> 
<DIV class=input>&lt;input type="text" name="selecting" size="60" onfocus="this.<B>select()</B>" onblur="alert('blur 상태가 되었습니다.');" value="커저를 넣어서 focus가 생기면 전체가 선택 됩니다." /&gt; </DIV><BR><BR><B>focus() Method</B> 
<P class=mtext>focus() Method 는 scripting으로 지정하는 입력란에 커저를 위치 시키는 Method 입니다.</P><INPUT size=60 value="오른 쪽 버튼을 클릭하세요." name=focus_in><INPUT onclick=focus_in.focus() type=button value="입력란에 focus 주기"><BR><BR><B>Source code</B> 
<DIV class=input>&lt;input type="text" name="<B><SPAN style="COLOR: #941919">focus_in</SPAN></B>" size="60" value="오른 쪽 버튼을 클릭하세요." /&gt;<BR>&lt;input type="button" value="입력란에 focus 주기" onclick="<B><SPAN style="COLOR: #941919">focus_in</SPAN>.focus()</B>" /&gt; </DIV><BR><BR><A name=onchange_event></A>
<HR class=grayHr>
<BR><B>onChange Event</B> 
<P class=mtext>onchange Event는 select - option 으로 만든 Drop down box 목록 중에서 하나를 선택할 때 발생하는 Event 로서 selectdIndex 라는 Method 로 value 값을 선택합니다. selectedIndex란 Drop down List 중에 선택(selected)된 항목(Index) 라는 뜻이 되겠습니다.</P><B class=pos>입력</B> <PRE class=input id=on_chg>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    function msg_box(){
    txt = document.form.box.options<SPAN style="COLOR: #941919">[document.form.box.<B>selectedIndex</B>]</SPAN>.value
    alert(txt)
    }
    // --&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form name="form"&gt;
            &lt;select name="box" <B>onchange</B>="msg_box()"&gt;
                &lt;option&gt;아래의 항목중에 하나를 선택하세요.&lt;/option&gt;
                &lt;option value="첫 번째 항목입니다."&gt;Item 1&lt;/option&gt;
                &lt;option value="두 번째 항목입니다."&gt;Item 2&lt;/option&gt;
                &lt;option value="세 번째 항목입니다."&gt;Item 3&lt;/option&gt;
            &lt;/select&gt;
        &lt;/form&gt;
    &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(on_chg);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A><BR><BR>
<HR class=grayHr>
<BR><B>disabled Attribute</B> 
<P class=mtext>앞의 Input Element에서 예제로 보여줬던 '항복', '저항' button의 source code 입니다. scripting 방법은 Value &amp; Length 페이지에서 설명한 대로 상위 Tag의 name 속성 부터 하위 Tag의 name 속성 및 value를 차례로 점(.)으로 연결 시키면 되겠습니다. 아래의 Source code에서 보는 바와 같이 enabled 속성의 경우와 같이 값이 따로 있지 않고 참(true) 인지, 거짓(false) 인지를 결정하는 Boolean 의 경우 true 또는 false 로 여부를 결정하면 되겠습니다.</P><B>입력</B> 
<DIV class=input id=active_button>&lt;body&gt;<BR>&lt;form&gt;<BR>이 약관에 항복 하시겠습니까?&lt;br /&gt;&lt;br /&gt;<BR>항복&lt;input type="radio" name="agree" onclick="document.all.ok.disabled=<B>false</B>;document.all.no.disabled=<B>true</B>;" /&gt;&nbsp;<BR>저항&lt;input type="radio" name="agree" onclick="document.all.ok.disabled=<B>true</B>;document.all.no.disabled=<B>false</B>;" checked="checked" /&gt;&lt;br /&gt;&lt;br /&gt;<BR>&lt;input type="button" <B>disabled="disabled"</B> name="ok" value="다음으로" /&gt; &lt;input type="reset" name="no" value="나가기" /&gt;&lt;br /&gt;<BR>&lt;/form&gt;<BR>&lt;/body&gt; </DIV><BR><BR><A href="javascript:copy2Clipboard(active_button);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A><BR><BR><BR>
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)