HTML의 onkeypress 이벤트 속성은 사용자가 키보드에서 키를 누르는 순간 발생하는 이벤트입니다. 주로 입력 필드에서 사용자가 타이핑할 때 실시간으로 반응해야 하는 상황에 활용됩니다.
onkeypress 이벤트 속성이란?
onkeypress는 키를 누르고 있을 때 반복적으로 발생할 수 있는 이벤트로, 텍스트 입력 감지, 검색 자동완성, 실시간 유효성 검사 등 다양한 기능을 구현할 때 유용합니다. 다만 최신 웹 표준에서는 더 세밀한 제어가 가능한 onkeydown과 onkeyup 이벤트 사용이 권장되기도 합니다.
문법(Syntax)
onkeypress 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onkeypress="script">내용</tagname>
태그 이름에 onkeypress 속성을 추가하고, 속성값으로 실행하고자 하는 JavaScript 코드나 함수를 지정하면 됩니다.
예제(Example)
다음은 textarea에 글자를 입력할 때마다 onkeypress 이벤트가 발생하여 입력 내용을 화면에 실시간으로 출력하는 예제입니다.
<!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 onkeypress Event Attribute Demo</h1>
<textarea placeholder="여기에 메시지를 입력하세요" rows="5" cols="40" onkeypress="keyFn()"></textarea>
<div class="show"></div>
<script>
function keyFn() {
document.querySelector(".show").innerHTML = '입력한 내용: ' + document.querySelector("textarea").value;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 브라우저에서 실행하면 흰색 텍스트 영역(textarea)이 나타납니다.
텍스트 영역에 메시지를 입력해 보세요. 키를 누를 때마다 onkeypress 이벤트가 발생하여, 입력한 내용이 아래 영역에 실시간으로 표시되는 것을 확인할 수 있습니다.
정리
onkeypress 이벤트 속성은 키보드 입력에 즉각적으로 반응해야 하는 인터랙티브한 웹 페이지를 만들 때 간편하게 사용할 수 있는 도구입니다. 다만 한글 IME 환경이나 특수키 처리에는 한계가 있으므로, 필요에 따라 keydown/keyup 이벤트와 함께 활용하는 것이 좋습니다.