[jQuery] keyup 이벤트를 이용하여 입력 값에 따라 다른 화면 요소 토글하기

26 Dec 2023

jQuery

이번에는 jQuery의 keyup 이벤트를 활용하여 입력 값을 기반으로 다른 화면 요소를 토글하는 방법에 대해 알아보겠습니다.

HTML 구조 설정

먼저 HTML 파일을 작성하고, 입력 필드와 토글할 화면 요소를 마크업합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>입력 값에 따라 화면 토글하기</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" id="inputField">
    <div id="toggleElement" class="hidden">
        이 화면 요소가 입력 값에 따라 토글됩니다.
    </div>

    <script>
        // jQuery를 이용한 이벤트 핸들링 및 화면 요소 토글하는 코드는 아래에 추가합니다.
    </script>
</body>
</html>

jQuery를 이용한 화면 요소 토글

이제 jQuery를 사용하여 입력 값에 따라 화면 요소를 토글하는 JavaScript 코드를 작성해봅시다.

<script>
    $(document).ready(function(){
        $('#inputField').on('keyup', function(){
            if($(this).val() !== ''){
                $('#toggleElement').show();
            } else {
                $('#toggleElement').hide();
            }
        });
    });
</script>

위 코드에서는 keyup 이벤트를 감지하여 입력 값을 확인하고, 입력 값이 비어있지 않다면 토글할 화면 요소를 나타내고, 입력 값이 비어있다면 숨깁니다.

마무리

이제 HTML과 jQuery를 조합하여 입력 값에 따라 다른 화면 요소를 토글할 수 있는 예제를 만들어보았습니다. keyup 이벤트 외에도 다양한 이벤트를 활용하여 필요에 맞는 상호작용을 구현할 수 있습니다.

참고문헌: