onkeyup 이벤트는 사용자가 키보드의 키를 눌렀다가 놓는(뗴는) 순간 발생하는 JavaScript 이벤트입니다. 키 입력이 완료되는 시점에 실행되기 때문에, 입력 필드의 값을 실시간으로 검사하거나 변환하는 작업에 자주 활용됩니다.
onkeyup 이벤트의 주요 특징
onkeyup은 keydown, keypress와 함께 키보드 관련 대표적인 이벤트 중 하나입니다. 각 이벤트의 발생 순서는 다음과 같습니다.
- keydown: 키를 누르는 순간 발생
- keypress: 문자 키가 눌릴 때 발생 (일부 브라우저에서 지원 제한)
- keyup: 키에서 손을 떼는 순간 발생
이 중 onkeyup은 입력이 '확정된' 상태에서 실행되므로, input 요소의 최종 값을 기준으로 처리해야 하는 로직에 적합합니다.
예제 코드
아래 예제는 onkeyup 이벤트를 활용해, 사용자가 입력 필드에 대문자로 입력하면 키를 뗄 때마다 자동으로 소문자로 변환해주는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<html>
<head>
<script>
<!--
function sayHello() {
var str = document.getElementById("subject");
str.value = str.value.toLowerCase();
}
//-->
</script>
</head>
<body>
<p>아래 입력창에 대문자로 입력하고 어떻게 변환되는지 확인해 보세요.</p>
<input type = "text" onkeyup = "sayHello()" id = "subject">
</body>
</html>코드 설명
- input 요소에
onkeyup = "sayHello()"속성을 추가하여, 키를 놓을 때마다 sayHello 함수가 호출되도록 설정했습니다. - sayHello 함수는
document.getElementById("subject")로 입력 요소를 가져옵니다. toLowerCase()메서드를 사용해 입력된 값을 소문자로 변환한 뒤 다시 value에 할당합니다.
onkeyup 활용 사례
실무에서는 onkeyup 이벤트를 다음과 같은 용도로 많이 사용합니다.
- 검색어 자동완성: 키 입력이 끝날 때마다 서버에 검색어를 전송하여 연관 검색어 표시
- 입력값 유효성 검사: 아이디, 비밀번호 형식을 실시간으로 확인
- 글자 수 카운터: 게시판이나 SNS 작성 시 남은 글자 수 실시간 표시
단, 한글처럼 조합형 문자(IME)를 사용하는 언어에서는 키 입력 과정이 복잡하기 때문에, 필요에 따라 compositionend 이벤트와 함께 사용하는 것이 좋습니다.