HTML onkeydown 이벤트 속성 완벽 가이드

HTML onkeydown 이벤트 속성은 사용자가 키보드의 키를 누르고 있는 동안 지정된 스크립트를 실행하는 이벤트 핸들러입니다. 텍스트 입력 실시간 감지, 단축키 구현 등 다양한 인터랙티브 기능을 만들 때 활용됩니다.

문법(Syntax)

onkeydown 이벤트 속성의 기본 문법은 다음과 같습니다.

<tagname onkeydown="script">Content</tagname>

태그에 onkeydown 속성을 추가하고, 키를 누를 때 실행할 자바스크립트 함수나 코드를 값으로 지정하면 됩니다.

예제(Example)

다음은 textarea에서 키를 누를 때마다 입력 내용을 화면에 출력하는 onkeydown 이벤트 속성의 실제 동작 예제입니다.

<!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 onkeydown Event Attribute Demo</h1>
<textarea class="" placeholder="Enter your message here" rows="5" cols="40" onkeydown="keyFn()"></textarea>
<div class="show"></div>
<script>
    function keyFn() {
        document.querySelector(".show").innerHTML = 'You enter: ' + document.querySelector("textarea").value;
    }
</script>
</body>
</html>

실행 결과(Output)

HTML onkeydown 이벤트 속성 완벽 가이드 – 사용법과 예제 코드

흰색 텍스트 영역에 메시지를 입력해 보세요. 키를 누르는 순간마다 onkeydown 이벤트가 발생하여 입력한 내용이 아래에 실시간으로 표시되는 것을 확인할 수 있습니다.

HTML onkeydown 이벤트 속성 완벽 가이드 – 사용법과 예제 코드

참고 사항

onkeydown 이벤트는 키를 누르는 즉시 발생하며, 키를 놓을 때 발생하는 onkeyup, 키를 눌렀다 뗐을 때 발생하는 onkeypress와 함께 사용하면 더욱 세밀한 키보드 이벤트 처리가 가능합니다.