JavaScript로 텍스트 영역(textarea)에서 화살표 키 비활성화하기

웹 개발을 하다 보면 텍스트 영역(textarea)에서 화살표 키를 사용한 커서 이동이나 스크롤을 막아야 하는 경우가 있습니다. 예를 들어 게임 조작 키와 충돌을 방지하거나, 특정 입력 환경에서 사용자의 실수로 인한 커서 이동을 제어하고 싶을 때 유용합니다. JavaScript의 keydown 이벤트와 preventDefault() 메서드를 활용하면 이를 손쉽게 구현할 수 있습니다.

핵심 원리

키보드의 각 키는 고유한 키 코드(keyCode) 값을 가집니다. 화살표 키와 관련된 주요 키 코드는 다음과 같습니다.

37 ← 왼쪽 화살표
38 ↑ 위쪽 화살표
39 → 오른쪽 화살표
40 ↓ 아래쪽 화살표
32 스페이스바(스크롤에 사용되므로 함께 차단)

이 키 코드들이 keydown 이벤트에서 감지되면 event.preventDefault()를 호출하여 기본 동작(커서 이동, 스크롤)을 취소하면 됩니다.

예제 코드

다음은 버튼을 클릭하면 텍스트 영역에서 화살표 키가 비활성화되는 전체 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>화살표 키 비활성화 예제</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>텍스트 영역에서 화살표 키 비활성화</h1>
<textarea class="AreaText">
텍스트 영역 요소 안에 있는 샘플 텍스트입니다
</textarea>
<div class="result"></div>
<button class="Btn" style="margin: 15px;">화살표 키 비활성화</button>
<h3>위 버튼을 클릭하면 텍스트 영역에서 화살표 키를 이용한 이동 및 스크롤이 비활성화됩니다</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    BtnEle.addEventListener("click", () => {
        window.addEventListener(
            "keydown",
            (event) => {
                if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
                    event.preventDefault();
                }
            },
            false
        );
        resEle.innerHTML = "화살표 키를 이용한 스크롤이 비활성화되었습니다";
    });
</script>
</body>
</html>

코드 설명

코드의 동작 방식을 단계별로 살펴보겠습니다.

버튼 클릭 이벤트 등록: BtnEle.addEventListener("click", ...)를 통해 '화살표 키 비활성화' 버튼이 클릭되었을 때 로직이 실행됩니다.
전역 keydown 이벤트 리스너 추가: window 객체에 keydown 이벤트 리스너를 등록하여 페이지 전체에서 키 입력을 감지합니다.
키 코드 검사: [32, 37, 38, 39, 40].indexOf(event.keyCode) > -1 조건문으로 눌린 키가 화살표 키 또는 스페이스바에 해당하는지 확인합니다.
기본 동작 차단: 해당 키라면 event.preventDefault()를 호출하여 커서 이동과 스크롤 같은 브라우저의 기본 동작을 막습니다.
결과 표시: .result 요소에 안내 메시지를 출력하여 사용자에게 비활성화 상태를 알립니다.

실행 결과

페이지를 실행하면 다음과 같이 텍스트 영역과 버튼이 표시됩니다.

JavaScript로 텍스트 영역(textarea)에서 화살표 키 비활성화하기

'화살표 키 비활성화' 버튼을 클릭한 후에는 텍스트 영역에서 화살표 키를 눌러도 커서가 이동하거나 스크롤되지 않습니다.

JavaScript로 텍스트 영역(textarea)에서 화살표 키 비활성화하기

참고 사항

keyCode는 오래된 속성으로 현재는 event.key(예: "ArrowLeft", "ArrowUp") 또는 event.code 사용이 권장됩니다. 다만 레거시 브라우저 호환성을 위해 keyCode도 여전히 널리 사용됩니다.
특정 텍스트 영역에만 적용하고 싶다면 window 대신 해당 textarea 요소에 이벤트 리스너를 등록하면 됩니다.
필요에 따라 event.ctrlKey 등의 조건을 추가하여 Ctrl 키 조합은 허용하는 등의 세부 제어도 가능합니다.