Caps Lock이 켜져 있습니다! 알려주는 기능, 웹에서도 가능할까?

웹 프로젝트를 진행하다 보면, 심심치 않게 이런 요구사항을 만날 수 있습니다.

'로그인 할 때 불편하니까, Caps Lock 키가 눌려져 있는지 알려주면 좋겠어요.'

왠지 어디선가 저런 기능을 본 것 같은 기억을 누구나 갖고 있을테니 말입니다.

결론부터 말하자면, '원칙적으로는 불가능하다. 그러나 Javascript로 흉내는 낼 수 있다!' 정도가 모범답안이 될 수 있으려나요?

Windows vs. Browser

윈도우 사용자가 많으니, 그냥 Windows를 예로 들어봅니다.(Windows라고 쓰고 Mac이라고 읽어도됩니다.)

윈도우는 O/S입니다. 즉, PC와 연결된 각종 연결장치들을 관리하고 제어하고, 그 위에서 프로그램을 구동시켜줍니다.

크롬 같은 브라우저는 O/S 기반위에서 동작하는 응용프로그램입니다.

따라서, 개념적으로 더 상위에 있는 OS에 연결되어 있는 장치들을 관리하고 제어하는 데 OS보다는 수월하지 않습니다.

Web 페이지는 이러한 Browser가 해석할 수 있는 문서를 말합니다. 브라우저 기반에서 동작하면서 이 웹페이지를 동적으로 만들어 줄 수 있는 언어가 Javascript입니다.

그러면 자바 스크립트로 Caps Lock 키 동작을 감지할 수 있을까요?

역시 결론부터 말하자면, Windows는 상시감지가 가능하지만, Javascript는 input에 포커스가 가 있는 상태에서 캡스락 키가 눌렸다 떨어지는 경우에만 인지가 가능하다는 차이가 존재합니다.

코드로 실습하면서 눈으로 확이해봐야겠죠?

HTML

아래와 같이 간단하게 인풋박스를 만들어봅니다.

<body style="background-color: #eee">
    <div class="container" style="padding: 40px; width: 300px">
      <label for="myInput">아이디 </label>
      <input type="text" id="myInput" />
      <p id="capsLockWarning" style="color: red; display: none">※ 주의: Caps Lock이 켜져 있습니다!</p>
    </div>
</body>

JavaScript

자바 스크립트에는 주석을 좀 달았습니다. HTML 엘리먼트 조작을 통해 특정 엘리먼트를 보였다가 숨겼다가 하는 동작원리와 동일한 방식으로 접근합니다.

const inputField = document.getElementById("myInput");
const warningMessage = document.getElementById("capsLockWarning");

// 키를 눌렀다 뗄 때(keyup) 상태를 확인하는 것이 일반적입니다.
inputField.addEventListener("keyup", function (event) {
    // event.getModifierState("CapsLock") 호출
    // Caps Lock이 활성화된 상태에서 키 이벤트가 발생했다면 true를 반환합니다.
    if (event.getModifierState("CapsLock")) {
      warningMessage.style.display = "block"; // 경고 메시지 보이기
    } else {
      warningMessage.style.display = "none"; // 경고 메시지 숨기기
    }
});

전체 코드

한 페이지에 몰아 넣고, VScode의 Live 서버를 구동시켜보도록 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="background-color: #eee">
    <div class="container" style="padding: 40px; width: 300px">
      <label for="myInput">아이디 </label>
      <input type="text" id="myInput" />
      <p id="capsLockWarning" style="color: red; display: none">※ 주의: Caps Lock이 켜져 있습니다!</p>
    </div>

    <script>
      const inputField = document.getElementById("myInput");
      const warningMessage = document.getElementById("capsLockWarning");

      // 키를 눌렀다 뗄 때(keyup) 상태를 확인하는 것이 일반적입니다.
      inputField.addEventListener("keyup", function (event) {
        // event.getModifierState("CapsLock") 호출
        // Caps Lock이 활성화된 상태에서 키 이벤트가 발생했다면 true를 반환합니다.
        if (event.getModifierState("CapsLock")) {
          warningMessage.style.display = "block"; // 경고 메시지 보이기
        } else {
          warningMessage.style.display = "none"; // 경고 메시지 숨기기
        }
      });

      // 페이지 로드 시나 포커스를 얻었을 때 초기 상태를 알 수는 없습니다.
      // 사용자가 필드 내에서 키를 입력해야 상태 확인이 가능합니다.
    </script>
  </body>
</html>

실행

라이브 서버를 구동하면 아래와 같이 인풋박스가 하나 나타나겠죠?

아이디 입력창이라고 가정을 하고, 타이핑을 해봅니다.

타이핑 중에 Caps Lock 키를 눌러봅니다.(input에 포커싱이 되어 있어야 동작합니다.)

미리 만들어 두었던, 빨간글자 안내문이 display: block;으로 전환하면서 통해 화면에 표시됩니다.

Caps Lock 키를 다시 눌러봅니다. 당연히 display: none;이 되면서 안내문이 숨겨집니다.

테스트 코드 및 동작원리

HTML에서 텍스트 입력 필드(input)와 경고 메시지를 표시할 문단(p)을 만듭니다. 처음에는 경고 메시지를 숨겨둡니다 (display: none).
JavaScript에서 해당 요소들을 가져옵니다.
입력 필드에 keyup 이벤트 리스너를 추가합니다. 사용자가 키보드에서 손을 뗄 때마다 이 함수가 실행됩니다.
이벤트 핸들러 함수 내에서 event.getModifierState("CapsLock")을 호출합니다. ← 이게 뽀인트군요!
만약 Caps Lock이 켜진 상태에서 키를 눌렀다 뗐다면 true를 반환하므로, 경고 메시지를 화면에 표시 (display = 'block') 합니다.
Caps Lock이 꺼진 상태라면 false를 반환하므로, 경고 메시지를 다시 숨깁니다 (display = 'none').

정리

JavaScript의 event.getModifierState("CapsLock")을 이용하면 사용자의 키 입력 이벤트 발생 시점의 Caps Lock 상태를 감지하여 사용자에게 피드백을 줄 수 있습니다. 하지만 시스템의 현재 상태를 임의의 시점에 직접 조회하는 것은 불가능합니다.

다시 말해, 윈도우는 OS이기 때문에 항시 감지가 가능하지만, 브라우저 위에서 구동하는 웹문서의 Javascript 입장에서는 OS와 약속된 기능이 없다면 키보드의 동작 이벤트에 대한 감지가 불가능하고, 현재 CapsLock 처럼 감지 기능을 제공한다고 하더라도 사용자의 입력중인 상태에서만 감지할 수 있다는 차이가 존재합니다.

그렇다면 한/영 키 변환도 같은 방식으로 감지할 수 있을까?

아쉽지만, 한/영 키가 현재 활성화된 상태인지 (즉, 현재 입력 모드가 한글인지 영문인지) 를 Caps Lock처럼 웹 페이지에서 JavaScript로 직접적이고 신뢰성 있게 확인하는 것은 매우 어렵거나 거의 불가능합니다.

Caps Lock 키와 달리 한/영 키는 다음과 같은 이유로 상태 확인이 어렵습니다:

표준화 부족:

Caps Lock은 event.getModifierState("CapsLock")이라는 표준화된 방법으로 상태를 확인할 수 있습니다.
하지만 한/영 키는 운영체제(Windows, macOS 등), 브라우저(Chrome, Firefox, Edge 등), 심지어는 키보드 하드웨어에 따라 JavaScript에 전달되는 키 정보(event.key, event.code, event.keyCode)가 매우 다릅니다. 일관된 값을 기대하기 어렵습니다.
IME (Input Method Editor) 의존성:

한/영 키는 운영체제 수준의 입력기(IME)와 직접 상호작용하여 실제 입력 모드를 변경합니다.
이 과정에서 브라우저의 JavaScript가 받는 키 이벤트 정보가 IME에 의해 가로채지거나 변경될 수 있습니다. 예를 들어, 한/영 키를 누르면 keydown 이벤트에서 keyCode가 229 (IME 처리 중을 의미하는 일반적인 값)로 나타나거나, event.key 값이 "Process" 등으로 표시될 수 있어 키 자체를 특정하기 어렵습니다.
'상태(State)' 확인 불가:

getModifierState() 메서드는 Caps Lock, Shift, Ctrl, Alt 처럼 키보드의 '상태'를 변경하고 유지하는 Modifier Key 들의 현재 상태를 가져오기 위해 설계되었습니다.
한/영 키는 입력 '모드'를 전환하는 키이지, getModifierState()로 조회할 수 있는 표준적인 '상태'를 가지지 않습니다. JavaScript는 보안상의 이유로 운영체제의 현재 IME 상태(한글 모드인지 영문 모드인지)를 직접적으로 조회할 수 있는 API를 제공하지 않습니다.

마치며

Caps Lock 키의 상태는 event.getModifierState("CapsLock")으로 비교적 안정적으로 확인할 수 있습니다.
하지만 한/영 키의 현재 활성화 상태(한글/영문 모드)를 확인하는 것은 JavaScript만으로는 거의 불가능합니다.
한/영 키가 '눌렸다'는 이벤트 자체를 감지하는 것은 위 코드처럼 시도해 볼 수 있으나, 환경에 따른 편차가 커서 신뢰성이 매우 낮습니다.

당연히 알고 있었지만, 그래도 궁금했던 점이 좀 풀리셨나요?^^

오늘도 즐거운 코딩, 즐코딩

KINcoding.com

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

onclick="location.href='url주소' 새 창으로 띄우려면? target="_blank" ? (0)	2023.04.04
sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 (0)	2023.02.27
배열 객체 메서드 sort(), filter(), map() 기초 정리 (0)	2023.02.26
콜백 함수(Callback Function)는 뭘까? Please Call Me (0)	2023.02.25
sort() 메서드로 상품 정렬 기능 만들기 (0)	2023.02.24

즐코딩 - KINcoding

Caps Lock이 켜져 있습니다! 알려주는 기능, 웹에서도 가능할까?