🐧Key Event
◈ keydown : 태그에서 키보드를 누른 경우 발생되는 이벤트
◈ keypress : 태그에서 키보드를 누르고 있는 경우 발생되는 이벤트 - KeyCode 제공
◈ keyup : 태그에서 키보드를 뛴 경우 발생되는 이벤트 - KeyCode 제공
🥎입력태그에 입력 촛점을 제공
◈ form 태그와 입력태그(input, select, textarea)의 name 속성값을 Element 객체로 사용
→ 입력태그의 Element 객체로 focus() 메소드를 호출하면 입력태그에 입력촛점 제공loginForm.id.focus();↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
📍$(selector).focus() : 선택자로 검색된 태그(입력태그)에 입력촛점을 제공하는 메소드
//$(loginForm.id).focus(); $("#id").focus();
🥎로그인 버튼에 클릭 이벤트가 발생했을 경우
📍JavaScript를 사용하여 만든거
//입력태그의 Element 객체에 value 프로퍼티를 이용하여 입력값 사용 가능 if(loginForm.id.value=="") { alert("아이디를 입력해 주세요.") loginForm.id.focus(); return; }─────────────────────────────────────
📍jQuery를 사용하여 만든거
🌠$(selector).val() : 선택자로 검색된 태그(입력태그)의 입력값을 반환하는 메소드
if($("id").val()=="") { alert("아이디를 입력해 주세요.") $("#id").focus(); return; } if($("passwd").val()=="") { alert("비밀번호를 입력해 주세요.") $("#passwd").focus(); return; }🌠form 태그의 Element 객체로 submit 메소드를 호출하여 제출 이벤트 발생 - form 태그 실행
//loginForm.submit();↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
🌠$(selector).submit() : 선택자로 검색된 태그(form 태그)에서 제출 이벤트를 발생하는 메소드
$("loginForm").submit()
🥎Enter를 누르면 입력 태그의 촛점이 바뀌는거
🌠event.keyCode : 이벤트가 발생된 키보드의 코드값(ASCII Code)를 제공하는 프로퍼티
$("#id").keypress(function() { //event.keyCode : 이벤트가 발생된 키보드의 코드값(ASCII Code)를 제공하는 프로퍼티 //alert(event.keyCode); // if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우 $("#passwd").focus(); } }); $("#passwd").keypress(function() { if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우 if($("#id").val()=="") { alert("아이디를 입력해 주세요."); $("#id").focus(); return; } if($("#passwd").val()=="") { alert("비밀번호를 입력해 주세요."); $("#passwd").focus(); return; } $("#loginForm").submit(); } });
🥎입력태그에 입력된 문자 갯수를 제공받아 변수에 저장
$("#content").keyup(function() { //입력태그에 입력된 문자 갯수를 제공받아 변수에 저장 var count=$(this).val().length // $("#count").text(count); });
📃18_key_event.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>Key Event</h1> <hr> <p>keydown : 태그에서 키보드를 누른 경우 발생되는 이벤트</p> <p>keypress : 태그에서 키보드를 누르고 있는 경우 발생되는 이벤트 - KeyCode 제공</p> <p>keyup : 태그에서 키보드를 뛴 경우 발생되는 이벤트 - KeyCode 제공</p> <hr> <form method="post" name="loginForm" id="loginForm"> <table> <tr> <td>아이디</td> <td><input type="text" name="id" id="id"></td> </tr> <tr> <td>비밀번호</td> <td><input type="password" name="passwd" id="passwd"></td> </tr> <tr> <td colspan="2"> <button type="button" id="loginbtn">로그인</button> </td> </tr> </table> </form> <hr> <div>현재 작성된 글자수 : <span id="count">0</span></div> <textarea rows="7" cols="80" id="content"></textarea> <script type="text/javascript"> //입력태그에 입력 촛점을 제공 //form 태그와 입력태그(input, select, textarea)의 name 속성값을 Element 객체로 사용 //→ 입력태그의 Element 객체로 focus() 메소드를 호출하면 입력태그에 입력촛점 제공 //loginForm.id.focus(); // //↑같은 결과 //$(selector).focus() : 선택자로 검색된 태그(입력태그)에 입력촛점을 제공하는 메소드 //$(loginForm.id).focus(); $("#id").focus(); //============================================================================== $("#loginBtn").click(function() { //JavaScript를 사용하여 만든거 /* //입력태그의 Element 객체에 value 프로퍼티를 이용하여 입력값 사용 가능 if(loginForm.id.value=="") { alert("아이디를 입력해 주세요.") loginForm.id.focus(); return; } */ //jQuery를 사용하여 만든거 //$(selector).val() : 선택자로 검색된 태그(입력태그)의 입력값을 반환하는 메소드 if($("id").val()=="") { alert("아이디를 입력해 주세요.") $("#id").focus(); return; } if($("passwd").val()=="") { alert("비밀번호를 입력해 주세요.") $("#passwd").focus(); return; } //form 태그의 Element 객체로 submit 메소드를 호출하여 제출 이벤트 발생 - form 태그 실행 //loginForm.submit(); // //$(selector).submit() : 선택자로 검색된 태그(form 태그)에서 제출 이벤트를 발생하는 메소드 $("loginForm").submit() }); //enter를 누르면 입력 태그의 촛점이 바뀌는거 $("#id").keypress(function() { //event.keyCode : 이벤트가 발생된 키보드의 코드값(ASCII Code)를 제공하는 프로퍼티 //alert(event.keyCode); // if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우 $("#passwd").focus(); } }); $("#passwd").keypress(function() { if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우 if($("#id").val()=="") { alert("아이디를 입력해 주세요."); $("#id").focus(); return; } if($("#passwd").val()=="") { alert("비밀번호를 입력해 주세요."); $("#passwd").focus(); return; } $("#loginForm").submit(); } }); // $("#content").keyup(function() { //입력태그에 입력된 문자 갯수를 제공받아 변수에 저장 var count=$(this).val().length // $("#count").text(count); }); </script> </body> </html>
