[jQuery] keyup 메소드를 사용하여 입력 값에 따라 다른 동작을 수행하는 예시

26 Dec 2023

jQuery

jQuery는 자바스크립트 라이브러리로, DOM 조작과 이벤트 처리를 간편하게 할 수 있습니다. 이 예시에서는 jQuery의 keyup 메소드를 사용하여 입력 값에 따라 다른 동작을 수행하는 방법을 살펴보겠습니다.

HTML

우선, HTML 파일에는 입력 필드와 이벤트가 발생할 때 변경될 요소가 있어야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>jQuery Keyup 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="inputField" placeholder="입력해 보세요">
  <p id="output"></p>
</body>
</html>

JavaScript (jQuery)

이제 jQuery를 사용하여 keyup 이벤트를 처리하는 JavaScript 코드를 작성해 봅시다.

$(document).ready(function() {
  $('#inputField').keyup(function() {
    var inputText = $(this).val();
    if(inputText === '') {
      $('#output').text('입력된 값이 없습니다.');
    } else {
      $('#output').text('입력된 값: ' + inputText);
    }
  });
});

위의 코드에서 $('#inputField').keyup은 inputField 요소에서 키보드의 키를 눌렀다가 떼었을 때 발생하는 이벤트를 처리합니다. 그리고 입력 값에 따라 output 요소의 내용을 변경합니다.

이제 이 코드를 포함한 HTML 파일을 웹 브라우저에서 열어 입력 필드에 값을 입력해 보시면, 입력할 때마다 결과가 실시간으로 업데이트되는 것을 확인하실 수 있을 것입니다.

이와 같이 jQuery의 keyup 메소드를 활용하여 입력 값에 따라 다른 동작을 수행할 수 있습니다.