[javascript] keycode, code 값 찾기 / keycode 299 해결방법(keycode와 code의 차이) / 키보드 이벤트 하는법(onkeydown, onkeyup, onkeypress, onchange)

컴퓨터에 키보드는 버튼마다 코드값이 있다

 

하지만 한국어나 중국어 같이

사진의 자<-라는 글씨처럼 완료가 돼기 전인 밑줄이 있는 글자는 유니코든가 뭔가로 넘어가기 때문에 무슨 키를 누르든 대부분의 키의 keycode는 299로 나온다

 

하지만 나는 꼭 키보드 이벤트가 필요한 프로그램을 만들고 있었고 keycode 속성을 계속 해서 만지고 보다보니 키를 누를때 keycode 속성만 있는게 아님을 알 수 있었고 code속성을 이용하는 방법을 찾았다

 

keycode와 code의 차이

1. 화면 클릭 후 아무 키나 눌러보세요

KeyCode

Code

2. 여기에 한글을 입력해보세요 :

 

한글/중국어로 키보드를 입력하면 keycode는 계속해서 299이며 code는 키에 따라 바뀐다

 

키보드 이벤트 사용법

keycode의 코드 값은 위 상자 참고

code의 코드 값은 위 상자 참고

 

onkeydown : 키보드를 눌렀을때 실행 되는 이벤트(꾹 누르고 있으면 계속 실행됨)

onkeyup : 키보드에서 손을 땠을때 실행 되는 이벤트

onkeypress : 문자가 입력 되면 실행 되는 이벤트(특수 키 안됨, 한글, 중국어 안됨 영문만 되는것 같음)

onchange : 내용이 변화(입력)되면 실행 되는 이벤트 이후 함수를 만들면 됨(인풋의 경우에는 엔터를 치거나 인풋에서 커서가 빠져나와야 이벤트가 실행 됨)

 

1. 태그안에 속성을 준다

<input type="text" onKeyDown="if(event.keyCode==13){startGame();}"> //직접 써줘도 상관없음
<input type="text" onkeyup="if(event.code == 'Backspace'){startGame();}">
<input type="text" onkeypress="startGame()"> //바로 함수를 불러와서 위의 내용을 사용해도 됨
<input type="text" onchange="startGame()">

 

2. javascript를 이용해 함수를 만들어 준다

window.onkeydown = function() {
  key_code.innerHTML = event.keyCode;
  code.innerHTML = event.code;
  if (event.code == "Enter"){
    alert('enter를 눌렀습니다')
  }
}

input이나 특정 태그에 이벤트를 주려면 window라는 부분에 input등의 셀렉터를 넣어주면 되며 onkeydown의 부분에 자신이 원하는 방식의 이벤트로 바꿔주면 된다

{ } 괄호 안에 이벤트 내용을 써주면 된다

 

결과

See the Pen Untitled by korearaogong (@korearaogong) on CodePen.