HTML onkeyup 이벤트 속성 – 개념, 문법, 실전 예제까지 한 번에

HTML의 onkeyup 이벤트 속성은 사용자가 키보드의 키를 눌렀다가 놓는 순간 발생하는 이벤트입니다. 텍스트 입력 실시간 감지, 검색 자동완성, 입력값 유효성 검사 등 다양한 상호작용 기능을 구현할 때 널리 활용됩니다.

onkeyup 이벤트 속성이란?

onkeyup은 사용자가 키를 떼는 시점에 지정된 JavaScript 코드를 실행합니다. 비슷한 키보드 이벤트로는 키를 누를 때 발생하는 onkeydown, 키가 눌린 상태에서 반복적으로 발생하는 onkeypress가 있으며, onkeyup은 그중에서도 '키에서 손을 뗀 후' 최종 입력값을 확인하기에 가장 적합합니다.

기본 문법

onkeyup 속성의 기본 작성 형식은 다음과 같습니다.

<tagname onkeyup="script">내용</tagname>

속성값으로 실행하고자 하는 JavaScript 함수나 코드를 문자열 형태로 전달하면 됩니다.

실전 예제

아래 예제는 텍스트 영역(textarea)에 글자를 입력할 때마다 onkeyup 이벤트가 발생하여, 입력한 내용이 실시간으로 화면에 출력되는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
</head>
<body>
<h1>HTML onkeyup Event Attribute Demo</h1>
<textarea placeholder="여기에 메시지를 입력하세요" rows="5" cols="40" onkeyup="keyFn()"></textarea>
<div class="show"></div>
<script>
    function keyFn() {
        document.querySelector(".show").innerHTML = '입력한 내용: ' + document.querySelector("textarea").value;
    }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 흰색 텍스트 입력창이 나타납니다.

입력창에 메시지를 타이핑해 보세요. 키를 놓는 순간마다 onkeyup 이벤트가 발생하여, 입력한 내용이 아래 영역에 즉시 표시되는 것을 확인할 수 있습니다.

예제 동작 원리 정리

onkeyup="keyFn()": textarea에서 키를 뗄 때마다 keyFn() 함수가 호출됩니다.
document.querySelector(): DOM에서 요소를 선택해 값을 읽거나 변경합니다.
innerHTML: 선택한 div 요소의 내용을 입력값으로 갱신하여 실시간 출력을 구현합니다.

이처럼 onkeyup 이벤트 속성을 활용하면 별도의 버튼 클릭 없이도 사용자의 입력을 즉시 반영하는 동적인 웹 페이지를 손쉽게 만들 수 있습니다.