onkeypress 이벤트는 사용자가 키보드의 키를 눌렀다가 놓는 시점에 발생하는 이벤트입니다. 주로 텍스트 입력 필드에서 사용자의 입력을 실시간으로 감지하거나, 특정 키 입력에 반응하는 기능을 구현할 때 활용됩니다.
onkeypress 이벤트 동작 방식
키가 눌리고 놓이는 과정에서 onkeypress 이벤트가 트리거되면, 이벤트 핸들러에 등록된 자바스크립트 함수가 실행됩니다. 아래 예제처럼 HTML 요소의 속성으로 직접 지정하거나, addEventListener() 메서드로도 등록할 수 있습니다.
예제 코드
<html>
<head>
<script>
function sayHello() {
alert("키가 눌렸습니다.");
}
</script>
</head>
<body>
<p>아래 입력 상자에서 아무 키나 눌러 보세요.</p>
<input type = "text" onkeypress = "sayHello()">
</body>
</html>
코드 설명
<body> 안의 텍스트 입력 상자(<input type="text">)에 onkeypress 속성으로 sayHello() 함수를 연결했습니다. 사용자가 해당 입력 상자에서 키를 누르면 함수가 호출되어 "키가 눌렸습니다."라는 경고창(alert)이 화면에 나타납니다.
참고 사항
onkeypress 이벤트는 문자 키에만 반응하며 Shift, Ctrl, Alt 같은 보조 키는 감지하지 못한다는 점에 유의하세요. 또한 최신 웹 표준에서는 keypress 이벤트가 더 이상 권장되지 않으므로, 실무에서는 keydown 또는 keyup 이벤트를 사용하는 것이 좋습니다.