[jQuery] keyup 메소드의 활용 예시

26 Dec 2023

jQuery

jQuery에서 keyup 메소드는 사용자가 키보드의 키를 누를 때 이벤트를 처리할 수 있습니다. 이 메소드를 사용하면 입력 필드나 textarea와 같은 요소의 텍스트 입력을 감지하고 이에 반응할 수 있습니다.

keyup 메소드의 기본 문법

$(selector).keyup(function(e) {
  // 사용자의 입력에 대한 처리
});

위 문법에서 selector는 이벤트를 연결할 요소의 선택자를 가리킵니다. function(e)는 keyup 이벤트가 발생했을 때 실행될 함수를 정의합니다. 함수 내부에서 e를 통해 발생한 keyup 이벤트의 정보에 접근할 수 있습니다.

keyup 메소드의 활용 예시

다음은 keyup 메소드를 사용하여 입력 필드에 사용자가 입력한 텍스트를 실시간으로 출력하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#inputField").keyup(function(){
        var inputText = $(this).val();
        $("#output").text(inputText);
      });
    });
  </script>
</head>
<body>

<input type="text" id="inputField">
<div id="output"></div>

</body>
</html>

위 예시에서는 id가 “inputField”인 입력 필드에 사용자가 입력한 텍스트를 실시간으로 감지하여 id가 “output”인 div 요소에 출력하는 기능을 구현하고 있습니다.

이처럼 keyup 메소드를 활용하면 입력 요소에 사용자의 입력을 실시간으로 감지하고 이에 따른 동적인 처리를 구현할 수 있습니다.

참고 문헌:

jQuery 공식문서. (https://api.jquery.com/keyup/)
MDN Web Docs. (https://developer.mozilla.org/ko/docs/Web/Events/keyup)