onkeyup 속성으로 키 입력 이벤트 처리하기
사용자가 키보드의 키를 놓는(눌렀다 뗐을 때) 순간에 스크립트를 실행하려면 HTML의 onkeyup 속성을 사용하면 됩니다.
onkeyup 속성은 사용자가 키를 떼는 시점에 지정된 JavaScript 함수를 호출합니다. 키를 누르는 순간에 반응하는 onkeydown과 달리, onkeyup은 키에서 손을 뗀 후에 실행되기 때문에 최종 입력값을 처리할 때 유용합니다.
예제
아래 코드를 실행해 보세요. 텍스트 상자 안에서 키를 하나 눌렀다 떼면 스크립트가 실행됩니다.
<!DOCTYPE html>
<html>
<body>
<p>텍스트 상자 안에서 키를 눌러 보세요.</p>
<input type = "text" onkeyup = "display()">
<script>
function display() {
alert("키를 뗐습니다!");
}
</script>
</body>
</html>참고 사항
키 관련 이벤트 속성은 다음과 같이 구분할 수 있습니다.
- onkeydown: 키를 누르는 순간에 실행됩니다.
- onkeypress: 문자 키를 눌렀을 때 실행됩니다(현재는 권장되지 않음).
- onkeyup: 키를 놓는 순간에 실행됩니다.
입력 필드의 최종 값을 검증하거나 실시간으로 화면에 반영할 때는 onkeyup이 가장 적합합니다.