jQuery를 사용하면 사용자가 입력하는 텍스트 필드나 textarea에서 글자를 입력할 때마다 발생하는 keyup 이벤트를 쉽게 핸들링할 수 있습니다.

1. HTML

우선, 이벤트를 핸들링할 텍스트 필드나 textarea를 HTML에 추가합니다.

<input type="text" id="myInput">

2. jQuery 코드

다음으로는 jQuery를 사용하여 keyup 이벤트를 핸들링하는 코드를 작성합니다.

$(document).ready(function(){
    $("#myInput").on('keyup', function(){
        var inputText = $(this).val();
        // 입력된 텍스트를 처리하는 코드 작성
    });
});

위 코드에서 사용된 keyup 이벤트는 사용자가 입력한 키를 떼었을 때 발생하는 이벤트를 핸들링합니다. 그리고 $(this).val()를 통해 사용자가 입력한 내용을 가져올 수 있습니다.

3. 예시

예를 들어, 사용자가 입력한 텍스트를 실시간으로 다른 곳에 표시하고 싶을 때 유용하게 사용할 수 있습니다.

$(document).ready(function(){
    $("#myInput").on('keyup', function(){
        var inputText = $(this).val();
        $("#display").text(inputText);
    });
});

위 예시에서는 #myInput에 입력된 내용을 #display에 실시간으로 표시하는 코드를 작성하였습니다.

jQuery를 이용한 keyup 이벤트 핸들링은 사용자가 입력한 내용을 실시간으로 처리하거나 반응하는 기능을 구현할 때 유용하게 활용될 수 있습니다.

참고 자료

• jQuery 공식문서