[JavaScript] 키보드 이벤트

키보드 이벤트는 3가지로 keyup, keydown, keypress가 있다. 여기서 keypress는 keydown과 유사하게 동작하며, 현재는 deprecated되어 사용을 권장하지 않기에 keypress는 keydown으로 대체하여 사용하면된다.

 

 

 

 

 

1. 동작 방식

- keyup

키보드를 누르고 땠을 때 실행, 키보드를 계속 꾹 누르면 실행되지 않음

 

- keydown

키보드를 눌렀을 때 바로 실행, 키보드를 계속 꾹 누르면 계속 실행됨

 

- keypress

keydown과 동작방식이 유사하나 Ctrl, Alt, Tab, Shift, Caps Lock 키들은 인식 못함

 

 

 

 

 

 

2. 구현 방법

JS에선 input에 넣어서 사용하기 보단 addEventListener를 사용하는걸 추천한다.

// JavaScript

// input에 바로 사용
<input type="text" onKeyup="function()" />
<input type="text" onKeydown="function()" />
<input type="text" onKeypress="function()" />


// addEventListener 사용
<script>
    var target = document.querySelector("#inputTest");
    target.addEventListener("keyup", (e) => function(e));
    target.addEventListener("keydown", (e) => function(e));
    target.addEventListener("keypress", (e) => function(e));
</script>

<input type="text" id="inputTest" />

 

// React + TypeScript

const Test = () => {

    const function = (e:React.KeyboardEvent):void => {
        ...
    }

    return (
        <div>
            <input type="text" onKeyUp={(e) => function(e)} />
            <input type="text" onKeyDown={(e) => function(e)} />
            <input type="text" onKeyPress={(e) => function(e)} />
        </div>
    )
}

export default Test;

 

728x90

반응형

 

 

 

 

 

 

 

3. keycode 

사용자의 키 입력을 감지할 수 있게 해주는 코드 값으로 어떤 키를 입력했는지 감지한 후 작업을 수행할 수 있다.

 

코드 값은 아래와 같다.

8	Backspace	27	ESC	40	Arrow Down	106	* (Num)
9	Tab	33	Page Up	45	Insert	107	+ (Num)
13	Enter	34	Page Down	46	Delete	109	- (Num)
16	Shift	35	End	48~57	0~9	110	. (Num)
17	Ctrl	36	Home	65~90	a~z	111	/ (Num)
18	Alt	37	Arrow Left	91	Windows	112~123	F1~F12
19	Pause/Break	38	Arrow Up	93	Right Click	144	Num Lock
20	Caps Lock	39	Arrow Rigth	96~105	0~9 (Num)	145	Scroll Lock

 

 

 

 

keycode 값을 이용하여 입력한 키를 감지한 뒤 특정 이벤트를 수행할 수 있다.

// JavaScript

<script>
    function fnTest(e) {
    	if(e.keyCode == '13') {
        	alert('Enter Event'); // keycode 사용
        }
        if(e.key == 'Tab') {
        	alert('Tab Event'); // 키워드를 사용해도 된다.
        }
    }
    
    var target = document.querySelector("#inputTest");
    target.addEventListener("keydown", (e) => fnTest(e));
</script>

<input type="text" id="inputTest" />

 

// React + TypeScript

const Test = () => {

    const function = (e:React.KeyboardEvent):void => {
        if(e.keyCode === '13') {
        	alert('Enter Event');
        }
        if(e.keyCode === 'Tab') {
        	alert('Tab Event');
        }
    }

    return (
        <div>
            <input type="text" onKeyDown={(e) => function(e)} />
        </div>
    )
}

export default Test;

 

 

추가로 CapsLock 감지는 아래와 같이 구현하면 된다.

// JavaScript

<script>
    function fnTest(e) {
    	if(e.getModifierState('CapsLock')) {
        	console.log('CapsLock Event'); // CapsLock On/Off 감지
        }
    }
    
    var target = document.querySelector("#inputTest");
    target.addEventListener("keydown", (e) => fnTest(e));
</script>

<input type="text" id="inputTest" />

 

// React + TypeScript

const Test = () => {

    const function = (e:React.KeyboardEvent):void => {
        if(e.getModifierState('CapsLock')) {
        	console.log('CapsLock Event'); 
        }
    }

    return (
        <div>
            <input type="text" onKeyDown={(e) => function(e)} />
        </div>
    )
}

export default Test;