잡동사니에도 사랑을

[21.10.06] exam07(02_jQueryEvent) - Key이벤트(keypress) 본문

JAVA_EE/JQuery

[21.10.06] exam07(02_jQueryEvent) - Key이벤트(keypress)

luvforjunk 2021. 10. 7. 02:44
728x90
반응형
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
   <link rel="stylesheet" href="../css/event.css">
</head>
<body>
   <h1>Key 이벤트 확인하기</h1>
   <div id="input">
      <input type="text">
   </div>
   <h2>결과</h2>
   <div id="result"></div>
   
   <script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript">
      $(function(){
      var count = 0;
         // keypress는 대소문자는 구분하지만 그 외 특수키는 인식 못 함
         $('#input > input[type=text]').keypress(function(){
            count++;
            $('#result').html('key count : ' + count);
         });
      });
   </script>
</body>
</html>

 

 

결과창

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.13] exam10(02_jQueryEvent)  (0) 2021.10.14
[21.10.13] exam08(02_jQueryEvent)  (0) 2021.10.14
[21.10.06] exam06(02_jQueryEvent) - KeyName(keyCode)  (0) 2021.10.07
[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)  (0) 2021.10.07
[21.10.06] exam04(02_jQueryEvent) - Hover이벤트 확인(Mouse Enter Event (onMouseOver), Mouse Leave Event (onMouseOut))  (0) 2021.10.07
'JAVA_EE/JQuery' Related Articles more