HTML DOM의 TouchEvent ctrlKey 속성은 터치 이벤트(touch event)가 발생한 시점에 Ctrl 키가 눌려 있었는지 여부를 나타내는 불리언(Boolean) 값을 반환합니다.
문법(Syntax)
이 속성은 true 또는 false의 불리언 값을 반환합니다.
touchEvent.ctrlKey
반환되는 booleanValue의 의미는 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 터치 이벤트가 발생했을 때 Ctrl 키가 눌려 있었음을 의미합니다. |
| false | 터치 이벤트가 발생했을 때 Ctrl 키가 눌려 있지 않았음을 의미합니다. |
참고: 이 글의 터치 이벤트 예제는 모바일 기기나 터치 입력을 지원하는 시스템에서 접근 가능한 온라인 HTML 에디터에서 실행했습니다. 화면을 2초간 길게 터치하는 것과 같은 실제 터치 동작을 수행해야 하기 때문입니다.
TouchEvent ctrlKey 속성 예제
다음은 TouchEvent ctrlKey 속성을 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</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-ctrlKey</legend>
<label for="textSelect">Background Color Changer</label>
<div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">No HotKey Pressed</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.ctrlKey){
formSelect.style.backgroundColor = '#F44336';
formSelect.style.color = '#FFF'
divDisplay.textContent = 'ctrl Key Pressed';
}
}
</script>
</body>
</html>실행 결과(Output)
터치 이벤트 발생 전 화면은 다음과 같습니다.
Ctrl 키를 누른 상태에서 터치 이벤트를 발생시킨 후, 폼의 배경색이 빨간색으로 변경되고 "ctrl Key Pressed" 메시지가 표시됩니다.
위 예제에서 볼 수 있듯이, ontouchstart 이벤트 핸들러 내에서 event.ctrlKey를 확인하면 사용자가 터치하는 순간 Ctrl 키를 함께 누르고 있었는지 판별할 수 있습니다. 이를 활용하면 터치 기기에서도 단축키(hotkey) 조합에 따른 다양한 인터랙션을 구현할 수 있습니다.