[jQuery] keyup 메소드를 사용하여 입력 값에 따라 사용자에게 피드백 제공하기

26 Dec 2023

jQuery

jQuery의 keyup 메소드는 입력 필드에 사용자가 키보드에서 키를 누르거나 뗄 때 발생하는 이벤트를 감지합니다. 이 기능을 사용하여 입력 값에 따라 사용자에게 실시간 피드백을 제공하는데 유용하게 활용할 수 있습니다.

HTML 코드 작성

먼저, 입력 필드와 피드백을 표시할 곳을 포함하는 HTML 코드를 작성해야 합니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다:

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

jQuery를 사용한 피드백 제공

다음으로, jQuery를 사용하여 입력 값에 따른 피드백을 제공하는 스크립트를 작성합니다. 아래의 코드를 참고하여 작성할 수 있습니다:

$(document).ready(function(){
    $('#inputField').keyup(function(){
        var inputVal = $(this).val();
        if(inputVal.length < 5){
            $('#feedback').text('입력은 5자 이상이어야 합니다.');
        } else {
            $('#feedback').text('');
        }
    });
});

위의 코드는 keyup 이벤트를 감지하여 입력된 값의 길이가 5자 미만일 때는 “입력은 5자 이상이어야 합니다.”라는 메시지를 #feedback 요소에 표시하며, 5자 이상일 때는 아무런 내용도 표시하지 않도록 합니다.

이제 위의 스크립트를 HTML 문서에 추가하면, 입력 값에 따라 사용자에게 실시간으로 피드백을 제공할 수 있게 됩니다.

참고문헌:

jQuery keyup: https://api.jquery.com/keyup/
jQuery selectors: https://api.jquery.com/category/selectors/
jQuery text: https://api.jquery.com/text/