HTML에서 키를 누를 때 스크립트 실행하기
사용자가 키를 누르는 순간 자바스크립트 코드를 실행하고 싶다면 onkeydown 속성을 활용하면 됩니다. onkeydown 속성은 사용자가 키를 누르는 순간 이벤트를 발생시키며, 입력 폼 유효성 검사, 실시간 검색, 단축키 구현 등 다양한 상황에서 유용하게 사용됩니다.
onkeydown 속성이란?
onkeydown은 HTML 요소에 직접 지정할 수 있는 이벤트 속성으로, 키보드의 키가 눌리는 시점에 지정된 자바스크립트 함수를 호출합니다. 키를 누르는 순간에 반응하기 때문에 onkeyup(키를 뗄 때)보다 더 빠르게 이벤트를 감지할 수 있다는 특징이 있습니다.
예제 코드
아래 예제는 텍스트 입력 상자 안에서 키를 누르면 알림 창을 띄우는 간단한 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<p>텍스트 상자 안에서 아무 키나 눌러보세요.</p>
<input type = "text" onkeydown = "display()">
<script>
function display() {
alert("키를 누르셨습니다!");
}
</script>
</body>
</html>코드 설명
<input> 요소에 onkeydown = "display()"를 지정하면, 해당 입력 상자에 포커스가 있는 상태에서 키를 누를 때마다 display() 함수가 호출됩니다. 이 함수 내부의 alert() 메서드가 실행되어 화면에 알림 창이 표시됩니다.
참고: 관련 키보드 이벤트
키보드 이벤트는 총 세 가지가 있으며, 발생 순서는 다음과 같습니다.
onkeydown (키를 누를 때) → onkeypress (문자 키가 눌릴 때) → onkeyup (키를 뗄 때)
상황에 맞는 이벤트를 선택하면 더욱 정교한 사용자 입력 처리를 구현할 수 있습니다.