Javascript

form이벤트 onfocus, onblur, onchange, onsubmit - 포커스얻을시, 포커스잃을시, 교체시, 폼보낼시

쿠카이든 2022. 12. 2. 19:34
728x90
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
  <body>
   <div id="ex_js_syntax">
      <script type="text/javascript" language="javascript">
      <!--
        /* Form Events onfocus onblur onchange onsubmit 
        onsubmit은 생략 form에 이벤트 걸면 됩니다.(티스토리 소스 꼬임)
        ex) form action="sub_form.php" onsubmit="sub_send()*/
        function onfocus_event(){
          /* onfocus 이벤트 */
          alert("onfocus 실행되였어요");
        }
        function onblur_event(){
          /* onblur 이벤트 */
          alert("onblur 실행되였어요");
        }
        function onchange_event(){
          /* onblur 이벤트 */
          alert("onchange 실행되였어요");
        }
      //-->
      </script>
      <form name="input_type" id="input_type" method="post" >
      <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
        <input type="text" value="포커스 얻을시 실행" onfocus="onfocus_event();">
        <br />
        <input type="text" value="포커스 잃을시 실행" onblur="onblur_event();">
        <br />
        <select name="atte_select_base" onchange="onchange_event();">
          <option value="base">기본</option>
          <option value="apple">사과</option>
          <option value="orange">오렌지</option>
        </select>
        <br />
      </form>
    </div>
  </body>
</html>

 

onfocusonbluronchangeonsubmit 

 

onfocus- 포커스를 얻었을때 이벤트가 발생합니다.
onblur- 포커스를 잃었을때 이벤트가 발생합니다.
onchange- 교체(체인지)시 이벤트가 발생합니다.
onsubmit- 폼보낼시 이벤트가 발생합니다.(예제는 생략)

 

출처 : https://roydest.tistory.com/entry/form%EC%9D%B4%EB%B2%A4%ED%8A%B8-onfocus-onblur-onchange-onsubmit

 

form이벤트 onfocus, onblur, onchange, onsubmit - 포커스얻을시, 포커스잃을시, 교체시, 폼보낼시

기본 사과 오렌지 -------------------------------------------------------------------------------------------- 위 소스 예제 보기 기본 사과 오렌지 onfocus, onblur, onchange, onsubmit onfocus- 포커스를 얻었을때 이벤트가 발생

roydest.tistory.com

 

 
728x90

'Javascript' 카테고리의 다른 글

keydown(), keyup() 이벤트  (0) 2022.12.27
getElementById() 대신 id.value  (0) 2022.12.22
const vs let (feat. 호이스팅)  (2) 2022.12.20
null,undefined,empty 체크  (0) 2022.12.12
테이블에 행 추가하는 이벤트  (0) 2022.11.16