HTML DOM의 KeyboardEvent altKey 속성은 HTML 문서에서 키 이벤트(key event)가 발생한 시점에 ALT 키가 눌려 있었는지 여부를 불리언(Boolean) 값으로 반환합니다.
이 속성은 사용자가 특정 키와 함께 ALT 키를 조합해서 눌렀는지 확인해야 할 때 유용하게 활용됩니다. 예를 들어, 단축키 기능을 구현하거나 특정 조합의 입력에만 다른 동작을 수행하도록 처리할 수 있습니다.
구문(Syntax)
altKey 속성의 기본적인 사용 구문은 다음과 같습니다.
event.altKey
- true: 키 이벤트 발생 시 ALT 키가 눌려 있었음
- false: 키 이벤트 발생 시 ALT 키가 눌려 있지 않았음
예제(Example)
아래 예제는 텍스트 입력 필드에서 키를 누를 때마다 altKey 속성 값을 확인하여 화면에 결과를 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
input {
border: 2px solid #fff;
padding: 8px;
background: transparent;
width: 310px;
border-radius: 20px;
outline: none;
}
::placeholder {
color: #000;
}
.show {
font-size: 1.2rem;
color: #fff;
}
</style>
<body>
<h1>HTML KeyboardEvent altKey Property Demo</h1>
<input type="text" placeholder="Enter your message" onkeydown="display(event)">
<div class="show">
</div>
<script>
function display(event) {
if (event.altKey) {
document.querySelector(".show").innerHTML = "ALT 키와 함께 " + event.key + " 키가 눌렸습니다";
} else {
document.querySelector(".show").innerHTML = "눌린 키는 " + event.key + " 입니다";
}
}
</script>
</body>
</html>실행 결과(Output)
코드를 실행하면 아래와 같은 화면이 나타납니다.
텍스트 필드 안에서 아무 키나 눌러 보세요. 그런 다음 ALT 키를 누른 상태에서 다른 키를 함께 입력하면 altKey 속성이 어떻게 작동하는지 결과를 통해 확인할 수 있습니다.
참고 사항
altKey 속성은 KeyboardEvent 객체뿐만 아니라 MouseEvent 객체에서도 제공되며, 마우스 이벤트 발생 시 ALT 키 눌림 여부를 확인할 때도 동일하게 사용할 수 있습니다. 또한 같은 방식으로 ctrlKey, shiftKey, metaKey 속성을 활용하면 Ctrl, Shift, Windows/Command 키의 조합 여부도 손쉽게 감지할 수 있습니다.