Javascript Key event 처리 (KeyCode deprecated 대체 코드)

더 이상 사용하면 안되는 이벤트 처리 방식

<textarea onkeyup="submitTextarea()"></textarea>

<script>
    function submitTextarea() {
				// 엔터를 누르면 전송 됩니다.
        if (event.keyCode === 13) {
            alert('전송');
        }
    }
</script>

인터넷 익스플로러가 한창이던 시절..

우리는 자바스크립트로 어떤 키가 눌렸는지 확인하기 위해서 event 라는 키워드를 사용했습니다.

event 라는 키워드를 사용하면 발생한 이벤트를 자동으로 event 라는 키워드로 할당 해줍니다.

 

이것은 Internet Explorer용으로 Microsoft에 의해 구현되었으며 이런 방식을 사용하는 사이트가 아직도 많습니다.

아직 동작하는 코드이긴 하나 이는 브라우저 표준이 아닌 코드입니다.

이 코드를 사용하면 아래와 같이 권장하지 않는다는 문구가 뜹니다.

 

 

 

더 나은 이벤트 처리의 방법

더 나은 이벤트 처리는 다음과 같이 이벤트 리스너를 사용하는 방법입니다.
이벤트 리스너가 감지한 이벤트를 넘겨 받아서 처리하는 방법입니다.

<textarea id="my-textarea" onkeyup="submitTextarea()"></textarea>

<script>
	function submitTextarea(e) {
		if (e.keyCode === 13) {
			alert('전송');
		}
	}
		
	// element 의 요소 선택
	let textarea = document.getElementById('my-textarea');
	// 이벤트 리스너가 catch 한 이벤트를 submitTextarea 에 넘겨줍니다.
	textarea.addEventListener('keyup', event => submitTextarea(event));
</script>

keyup 이벤트 리스너를 html 요소에 달아두었고 이벤트가 발생하면 함수에 넘겨주는 방식 입니다.

 

 

 

또 하나의 문제점

그런데 아직 하나 더 문제가 남아있습니다. keyCode 를 사용하지 말라는 경고 문구입니다.

현재는 사용이 권장 되지 않는 코드입니다.

따라서 다음과 같은 코드 사용을 권장합니다.

<textarea id="my-textarea"></textarea>

<script>

    function submitTextarea(event) {
        if (event.key === 'Enter') {
            alert('전송');
        }
    }

    let textarea = document.getElementById('my-textarea');
    textarea.addEventListener('keyup', event => submitTextarea(event));
</script>

다만, 아직은 key property 를 지원하지 않는 브라우저도 있습니다.

지원하지 않는 브라우저에서 key property 는 undefined 를 반환할 것입니다. 따라서 아래와 같이 쓰는 것이 안전합니다.

<textarea id="my-textarea"></textarea>

<script>

    function submitTextarea(event) {
        let key = event.key || event.keyCode;

        if (key === 'Enter' || key === 13) {
            alert('전송');
        }
    }

    let textarea = document.getElementById('my-textarea');
    textarea.addEventListener('keyup', event => submitTextarea(event));
}

key 변수를 봅니다.

let key = event.key || event.keyCode;

이 코드는 event.key 를 먼저 바라 봅니다.

만약 브라우저가 전달해준 event 에 key property가 존재할 경우, 해당 값을 key 변수에 전달합니다.

그런데 key property가 undefined 일 경우, 그 다음에 작성해준 event.keyCode 를 바라봅니다. (자바스크립트의 피연산자)

key property 를 지원하지 않는 브라우저에서도 keyCode property는 가지고 있기 때문에 위와 같이 사용하는 것이 안전합니다.

 

Shift + Enter ⇒ new line, Enter ⇒ 전송 구현하기

요즘엔 SPA 방식으로 개발을 많이 하면서 textarea 태그에 enter 버튼에 줄 바꿈이 아닌, 전송을 수행하고,

Shift + Enter 키로 new line 을 추가하는 기능을 구현하곤 하는데 아래와 같이 사용해서 기능을 구현할 수 있습니다.

<textarea id="my-textarea"></textarea>
<script>

    function submitTextarea(event) {
        let key = event.key || event.keyCode;
        
        if ((key === 'Enter' && !event.shiftKey) || (key === 13 && key !== 16)) {
            event.preventDefault();
            alert('전송');
            return false;
        }
    }

	// keydown 이벤트에 달아주었습니다.
    let textarea = document.getElementById('my-textarea');
    textarea.addEventListener('keydown', event => submitTextarea(event));
</script>

코드를 조금 파헤쳐 보면 다음과 같습니다

 

if ((key === 'Enter' && !event.shiftKey) || (key === 13 && key !== 16)) {
    event.preventDefault();
    alert('전송');
    return false;
}

엔터의 기본 역할인 new line 추가를 막습니다.

단, 이벤트 함수를 keyup 이 아니라, keydown 이벤트에 달아주어야 합니다. 키가 입력되는 시점에 막아야 동작을 하기 때문입니다.