HTML DOM의 TouchEvent altKey 속성은 터치 이벤트(touch event)가 발생한 시점에 Alt 키가 함께 눌려 있었는지 여부를 나타내는 Boolean(논리형) 값을 반환합니다.
문법(Syntax)
altKey 속성은 다음과 같이 사용하며, true 또는 false 중 하나의 불리언 값을 반환합니다.
touchEvent.altKey
반환값 설명
| booleanValue | 설명 |
|---|---|
| true | 터치 이벤트가 발생했을 때 Alt 키가 눌려 있었음을 의미합니다. |
| false | 터치 이벤트가 발생했을 때 Alt 키가 눌려 있지 않았음을 의미합니다. |
참고 사항
본 문서의 터치 이벤트 예제는 모바일 기기 또는 터치 입력이 가능한 시스템에서 접속할 수 있는 온라인 HTML 에디터를 통해 실행되었습니다. 화면을 2초간 길게 터치하는 것과 같은 실제 터치 동작을 수행하기 위함입니다.
예제 코드
다음은 TouchEvent altKey 속성을 활용한 예제입니다. 폼 요소에 터치가 시작될 때 Alt 키가 눌려 있는지 확인하고, 눌려 있다면 배경색을 변경하고 안내 문구를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent altKey</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
legend{
border-color: #dc3545;
}
span {
display: inline-block;
width: 40px;
height: 20px;
margin: 1px;
color: #fff;
border: 3px solid black;
}
div span:nth-child(1){
background-color: #FF8A00;
}
div span:nth-child(2){
background-color: #F44336;
}
div span:nth-child(3){
background-color: #03A9F4;
}
div span:nth-child(4){
background-color: #4CAF50;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="eventAction(event)">
<fieldset>
<legend>HTML-DOM-TouchEvent-altKey</legend>
<label for="textSelect">배경색 변경기</label>
<div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">눌린 단축키 없음</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.altKey){
formSelect.style.backgroundColor = '#FF8A00';
formSelect.style.color = '#FFF'
divDisplay.textContent = 'Alt 키가 눌렸습니다';
}
}
</script>
</body>
</html>실행 결과
터치 이벤트가 발생하기 전 화면은 다음과 같습니다.
Alt 키를 누른 상태에서 터치 이벤트를 발생시킨 후, 폼의 배경색이 변경되고 "Alt 키가 눌렸습니다"라는 메시지가 표시됩니다.
이처럼 altKey 속성을 활용하면 터치 이벤트와 조합키 입력 상태를 함께 감지하여, 사용자 인터랙션에 따라 동적으로 UI를 제어할 수 있습니다.