[jQuery] jQuery keyup 메소드를 사용하여 입력 값에 따라 결과 갱신하기

26 Dec 2023

jQuery

jQuery는 입력 필드 값이 변경될 때 발생하는 이벤트를 캐치하여 동적으로 웹 페이지를 업데이트하는 데 사용될 수 있는 다양한 메소드를 제공합니다. 이 가이드에서는 jQuery의 keyup 이벤트를 사용하여 입력 값에 따라 결과를 갱신하는 방법을 알아보겠습니다.

1. HTML 파일 설정

먼저, 아래와 같이 HTML 파일을 설정합니다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery keyup 메소드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="inputField">
  <div id="result"></div>

  <script src="script.js"></script>
</body>
</html>

2. JavaScript 파일 작성

다음으로, script.js 파일을 만들고 아래의 코드를 추가합니다. 이 코드는 입력 필드의 값이 변경될 때마다 결과를 갱신하는 역할을 합니다.

$(document).ready(function(){
  $('#inputField').keyup(function(){
    var value = $(this).val();
    $('#result').text(value);
  });
});

위 코드에서 keyup 메소드는 입력 필드의 값이 변경될 때마다 실행됩니다. 입력 필드의 값은 $(this).val()를 통해 가져와 #result 요소의 텍스트로 설정됩니다.

결과 확인

이제 브라우저에서 HTML 파일을 열고, 입력 필드에 값을 입력하면 해당 값이 실시간으로 결과란에 나타나는 것을 확인할 수 있습니다.

이것으로 jQuery의 keyup 메소드를 활용하여 입력 값에 따라 결과를 갱신하는 방법을 알아보았습니다. 다양한 방식으로 이를 응용하여 동적 웹 페이지를 구축할 수 있습니다.

더 많은 jQuery 이벤트와 메소드에 대해 자세히 알고 싶다면 jQuery 공식 문서를 참고하시기 바랍니다.