HTML DOM KeyboardEvent 객체

<시간/>

HTML DOM KeyboardEvent 객체는 사용자가 키보드의 키를 눌렀을 때의 이벤트를 나타냅니다.

속성

여기, 'KeyboardEvent' 다음과 같은 속성과 메서드를 가질 수 있습니다 -

속성/메서드	설명
altKey	"ALT" 키를 눌렀는지 여부를 반환합니다.
문자코드	키의 유니코드 문자 코드를 반환합니다.
코드	키의 코드를 반환합니다.
ctrl키	"CTRL" 키를 눌렀는지 여부를 반환합니다.
getModifierState()	지정된 키가 활성화되면 true를 반환하고 비활성화되면 false를 반환합니다.
작곡 중	이벤트 상태가 작성 중인지 여부를 반환합니다.
키	이벤트가 나타내는 키의 키 값을 반환합니다.
키코드	이벤트를 트리거한 키의 유니코드 문자 코드를 반환합니다.
위치	키보드나 기기의 키 위치를 반환합니다.
메타키	키 이벤트가 트리거될 때 "메타" 키가 눌렸는지 여부를 반환합니다.
반복	키를 반복적으로 누르고 있는지 여부를 반환합니다.
shift키	키 이벤트가 트리거될 때 "SHIFT" 키가 눌렸는지 여부를 반환합니다.
어떤	이벤트를 트리거한 키의 유니코드 문자 코드를 반환합니다.

이벤트

그리고 다음은 keyboardEvent Object에 작용하는 이벤트입니다 -

이벤트	설명
온키다운	사용자가 키를 누를 때 이벤트가 발생합니다.
키 누름	사용자가 키를 누를 때 이벤트가 발생
온키업	사용자가 키를 놓을 때 이벤트가 발생합니다.

예시

key의 예를 살펴보겠습니다. 속성 -

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</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-key</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.key === 'B')
         divDisplay.textContent = 'Correct Answer';
      else if(InputEvent.key === 'b')
         divDisplay.textContent = 'Close call, you might have caps lock turned off';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

텍스트 필드에 아무 것도 입력하기 전에 -

HTML DOM KeyboardEvent 객체

'b'를 입력한 후 텍스트 필드에서 -

HTML DOM KeyboardEvent 객체

'B'를 입력한 후 텍스트 필드에서 -

HTML DOM KeyboardEvent 객체