반응형
# 게시글 보기 전 #
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Alpreah - Jquery 엔터키 이벤트</title> </head> <body> <input type="text" id="alpreah_input"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script> $(document).ready(function() { $("#alpreah_input").keydown(function(key) { if (key.keyCode == 13) { alert("엔터키를 눌렀습니다."); } }); }); </script> </body> </html> | cs |
자신이 쓰시는 툴에 위 소스코드를 넣어서 저장시켜주세요.
저장읋 하셨다면 HTML 파일을 실행시켜주세요.
# 코드 해석 #
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Alpreah - Jquery 엔터키 이벤트</title> </head> <body> <!-- INPUT 태그의 타입은 문자열이고 ID는 alpreah_input 이다. --> <input type="text" id="alpreah_input"> <!-- src를 통해 jquery 3.3.1 cdn을 불러온다 네트워크 연결 상태 필수 --> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script> //모든 페이지가 요청이 되었을 때 $(document).ready(function() { // ID를 alpreah_input로 가지는 곳에서 키를 누를 경우 $("#alpreah_input").keydown(function(key) { //키의 코드가 13번일 경우 (13번은 엔터키) if (key.keyCode == 13) { //경고창을 출력한다. alert("엔터키를 눌렀습니다."); } }); }); </script> </body> </html> | cs |
HTML 파일을 실행하게 되면 네모 칸을 쳐둔것처럼 INPUT 태그가 하나 있습니다.
인풋 태그에 마우스를 이용해 클릭 하신뒤 엔터키를 누르시면 아래의 결과를 확인 하실수 있습니다.
-
# KEYCODE 알아내기 #
만약, 엔터키가 아닌 다른 키코드를 알고 싶으 실 경우 여기를 눌러주세요.
자신이 원하는 키를 입력하시면 네모 칸으로 친것처럼 키 코드가 나오게 됩니다.
# 기타 응용 #
1. 엔터키를 누를때 다른 태그를 클릭하게 하자!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Alpreah - Jquery 엔터키 이벤트</title> </head> <body> <!-- INPUT 태그의 타입은 문자열이고 ID는 alpreah_input 이다. --> <input type="text" id="alpreah_input"> <button id="alpreah_btn">버튼</button> <!-- src를 통해 jquery 3.3.1 cdn을 불러온다 네트워크 연결 상태 필수 --> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script> //모든 페이지가 요청이 되었을 때 $(document).ready(function() { // ID를 alpreah_input로 가지는 곳에서 키를 누를 경우 $("#alpreah_input").keydown(function(key) { //키의 코드가 13번일 경우 (13번은 엔터키) if (key.keyCode == 13) { //ID가 alpreah_btn을 찾아 클릭해준다. //버튼 말고도 p태그나 다른 태그도 다 응용 가능 합니다. //대신 이벤트 발생을 위해서는 29번쨰 줄 코드처럼 이벤트를 걸어줘야 합니다. $("#alpreah_btn").click(); } }); $("#alpreah_btn").click(function() { alert("버튼을 눌렀습니다~"); }); }); </script> </body> </html> | cs |
반응형
