어제 오늘 내일

[Javascript] Caps Lock 키 활성화 여부 체크하기 본문

IT/Javascript

[Javascript] Caps Lock 키 활성화 여부 체크하기

hi.anna 2020. 11. 14. 02:39

 

사용자에게 input 창에 입력을 받을 때,

사용자 키보드의 Caps Lock 키가 활성화 되어 있는지 확인하여,

Caps Lock이 활성화 되어 있으면 메시지를 보여주는 방법을 소개합니다.

 

 

Caps Lock 키 활성화 여부 체크하기

<input id='name' onkeyup="checkCapsLock(event)"/>
<div id='message'></div>

 
function checkCapsLock(event)  {
  if (event.getModifierState("CapsLock")) {
    document.getElementById("message").innerText 
      = "Caps Lock이 켜져 있습니다."
  }else {
    document.getElementById("message").innerText 
      = ""
  }
}

 

 

위 예제는 입력창에 뭔가가 입력되면,

사용자의 키보드에 Caps Lock 키가 활성화 되어 있을 경우,

입력창 아래쪽에 'Caps Lock이 켜져 있습니다' 라는 메세지를 보여주는 예제입니다.

 

 <HTML> 

onkeyup="checkCapsLock(event)"

입력창에 키보드로 뭔가를 입력하면, 

키보드를 눌렀다가 떼는 순간(onkeyup)에

Caps Lock 키가 눌렸는지를 체크하는 checkCapsLock 함수를 호출합니다.

 

 <Javascript> 

event.getModifierState("CapsLock")

checkCapsLock 함수에서는 전달받은 event의 getModifierState 함수를 호출합니다.

 

 

KeyboardEvent.getModifierState() 함수 살펴보기

getModifierState() 함수는

키보드의 몇 가지 키의 상태를 true/false로 리턴합니다.

대표적으로 아래 키 문자열을 파라미터로 전달하여, 각 키의 상태를 체크할 수 있습니다.

  • CapsLock
  • NumLock 
  • ScrollLock
  • Alt
  • Shift
  • Ctrl

더 많은 키의 상태, 운영체제별(Windows, Linux, Mac, Android) 키 체크 방법은 아래의 링크를 참조하세요.

developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState

 

KeyboardEvent.getModifierState()

The KeyboardEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.

developer.mozilla.org

 

다시 예제 코드로 돌아와서...

<input id='name' onkeyup="checkCapsLock(event)"/>
<div id='message'></div>

 
function checkCapsLock(event)  {
  if (event.getModifierState("CapsLock")) {
    document.getElementById("message").innerText 
      = "Caps Lock이 켜져 있습니다."
  }else {
    document.getElementById("message").innerText 
      = ""
  }
}

 

위 예제에서는 Caps Lock이 눌려진 상태인지를 체크하기 위해서

getModifierState() 함수의 파라미터로 "CapsLock"을 전달하였습니다.

 

위 예제에 다른 키 값들도 넣어서 테스트 해보세요.

 

 

getModifierState() 함수를 이용하여,

사용자 키보드의 Caps Lock 상태를 확인하는 방법을 알아보았습니다.

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기  (0) 2020.11.14
[Javascript] 라디오 버튼(radio) 값 가져와서 출력하기  (1) 2020.11.14
[Javascript] 배열에서 빈값 제거하기  (0) 2020.11.08
[Javascript] 배열 중복 제거하는 3가지 방법  (3) 2020.10.21
[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법  (1) 2020.10.20
공유하기 링크
'IT/Javascript' Related Articles more
Comments