📂프로그래밍

자바스크립트에서 입력창에 단축키로 접근하는 예제

쇼케이스

첫번째 입력칸:

두번째 입력칸:

키보드에서 1을 누르면 첫번째 입력칸으로 커서가 이동하고, 2를 누르면 두번째 입력칸으로 커서가 이동한다. 아래에서 더 자세하게 설명하겠지만, 1를 누를 경우 첫번째 입력칸에 바로 1가 입력되는 것을 볼 수 있다. 이를 방지하기 위해서 두번째 입력칸에서는 event.preventDefault() 메서드를 사용하여 입력을 방지한다.

코드

HTML

<label for="input1">첫 번째 입력칸:</label>
<input type="text" id="input1"><br><br>

<label for="input2">두 번째 입력칸:</label>
<input type="text" id="input2"><br><br>

• <label> 태그는 적어도 이 예제에서 중요한 요소는 아니다.
• <input> 태그의 id 속성을 통해서 자바스크립트의 getElementById().focus() 메서드가 작동한다.

javascript

<script>
    document.addEventListener("keydown", function(event) {
        if (event.key === "1") {  
            document.getElementById("input1").focus();
        } else if (event.key === "2") {  
            event.preventDefault();  // 2 입력 방지
            document.getElementById("input2").focus();
        }
    });
</script>

• document.addEventListener의 첫번째 인수인 "keydown"에 따라 키보드가 눌렸을 때 이벤트가 실행된다.
• event.key와 비교하는 문자열을 수정함으로써 단축키를 변경할 수 있다.
• event.preventDefault()가 없으면 단축키를 누르면 입력칸에 해당 문자가 입력되고, 이를 방지 하기 위한 메서드다.
• document.getElementById(id).focus() 메서드는 해당 id를 가진 요소에 포커스를 준다.