개요
HTML DOM KeyboardEvent 객체의 metaKey 속성은 키보드 이벤트가 발생한 순간 Meta 키가 함께 눌려 있었는지 여부에 따라 Boolean 값(true/false)을 반환합니다. Windows 키보드에서는 Windows 키, Mac 키보드에서는 Command(⌘) 키가 Meta 키에 해당합니다.
이 속성은 읽기 전용(read-only)이며, 사용자가 Meta 키와 다른 키를 조합한 특수 단축키를 입력했는지 판별해야 하는 상황에서 유용하게 활용됩니다.
문법(Syntax)
metaKey 속성의 기본 문법은 다음과 같습니다.
Boolean 값 반환:
event.metaKey
- true : 이벤트 발생 시점에 Meta 키가 눌려 있었던 경우
- false : Meta 키가 눌려 있지 않았던 경우
예제
다음은 KeyboardEvent metaKey 속성의 실제 동작을 보여주는 예제입니다. 텍스트 입력창에서 키를 누를 때마다 onkeydown 이벤트가 발생하고, 이벤트 객체의 metaKey 값을 검사하여 화면에 결과를 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent metaKey</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-metaKey</legend>
<label>Editor:
<input type="text" id="textSelect" onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay">I Dare you to press the meta key</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventData(InputEvent) {
if(InputEvent.metaKey === true)
divDisplay.textContent = 'You are very brave!';
else
divDisplay.textContent = 'You scared enough?';
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
① 페이지 로드 직후 (아무 키도 누르지 않은 초기 상태):
② Meta 키 없이 일반 키만 눌렀을 때:
③ Meta 키를 누른 상태에서 다른 키를 함께 입력했을 때:
마무리
metaKey 속성은 ctrlKey, altKey, shiftKey 속성과 함께 키보드 이벤트의 수정 키(modifier key) 상태를 확인하는 대표적인 속성입니다. 이 네 가지 속성을 적절히 조합하면 Ctrl+C, Meta+Shift+S 같은 다양한 단축키 인터랙션을 손쉽게 구현할 수 있으므로, 키보드 이벤트를 다루는 웹 애플리케이션 개발 시 꼭 기억해 두면 좋습니다.