[jQuery] keyup 메소드를 이용한 입력 값에 대한 실시간 반응 구현

26 Dec 2023

jQuery

jQuery를 사용하여 웹 페이지에서 입력 값에 대한 실시간 반응을 구현하고자 할 때 keyup 메소드를 활용할 수 있습니다. keyup 메소드는 사용자가 키보드의 키를 눌렀다 뗄 때 이벤트를 발생시키며, 입력란에 입력한 값이 변할 때마다 이를 감지하여 즉시 반응할 수 있게 해줍니다.

HTML 파일 작성

먼저, 입력란과 반응할 영역을 HTML 파일에 작성합니다.

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <input type="text" id="inputText">
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript 파일 작성

다음으로, 입력 값에 대한 실시간 반응을 담당할 JavaScript 파일을 작성합니다.

$(document).ready(function () {
    $('#inputText').keyup(function () {
        var text = $(this).val();
        $('#output').text(text);
    });
});

위 코드에서는 inputText라는 ID를 가진 입력란의 keyup 이벤트를 감지하고, 해당 이벤트가 발생할 때마다 입력된 값을 output이라는 ID를 가진 영역에 실시간으로 반영하고 있습니다.

실행 결과

이제 웹 브라우저에서 HTML 파일을 실행하면 입력란에 텍스트를 입력할 때마다 그 값을 실시간으로 반응하여 출력하는 것을 확인할 수 있습니다.

이것으로 jQuery의 keyup 메소드를 활용하여 입력 값에 대한 실시간 반응을 구현하는 방법을 알아보았습니다.

자세한 내용은 jQuery 공식 문서를 참고할 수 있습니다.