자판 키 120개의 code와 keyCode
KeyboardEvent에서 나오는 값들입니다. code는 자판의 자리라 언어를 타지 않고, key는 그 순간 찍히는 글자라 자판마다 다릅니다.
code와 key의 차이
code는 자판에서의 자리라 한글이든 프랑스어 자판이든 같은 값입니다. key는 그 순간 찍히는 글자라 바뀝니다 — 같은 자리를 눌러도 a·A·ㅁ가 됩니다. "이 자리를 눌렀나"를 보려면 code, "무엇이 입력됐나"를 보려면 key입니다.
keyCode는 표준에서 빠진 값입니다. 새로 쓰는 코드에는 code나 key를 쓰고, 여기 실은 값은 옛 코드를 읽을 때 쓰세요.
글자26
자리는 KeyA로 고정입니다. 한글 자판에서 ㅁ이 찍혀도 code는 KeyA입니다.
KeyA"a"65KeyB"b"66KeyC"c"67KeyD"d"68KeyE"e"69KeyF"f"70KeyG"g"71KeyH"h"72KeyI"i"73KeyJ"j"74KeyK"k"75KeyL"l"76KeyM"m"77KeyN"n"78KeyO"o"79KeyP"p"80KeyQ"q"81KeyR"r"82KeyS"s"83KeyT"t"84KeyU"u"85KeyV"v"86KeyW"w"87KeyX"x"88KeyY"y"89KeyZ"z"90
숫자10
숫자 줄입니다. 숫자판의 같은 숫자와는 keyCode가 다릅니다.
Digit0"0"48Digit1"1"49Digit2"2"50Digit3"3"51Digit4"4"52Digit5"5"53Digit6"6"54Digit7"7"55Digit8"8"56Digit9"9"57
기호12
keyCode가 브라우저마다 갈리는 자리가 여기 있습니다.
Semicolon";"186Equal"="187Comma","188Minus"-"189Period"."190Slash"/"191Backquote"`"192BracketLeft"["219Backslash"\"220BracketRight"]"221Quote"'"222IntlBackslash"\"226
숫자판20
location이 3이라 숫자 줄과 구별됩니다.
Numpad0"0"96Numpad1"1"97Numpad2"2"98Numpad3"3"99Numpad4"4"100Numpad5"5"101Numpad6"6"102Numpad7"7"103Numpad8"8"104Numpad9"9"105NumpadAdd"+"107NumpadSubtract"-"109NumpadMultiply"*"106NumpadDivide"/"111NumpadDecimal"."110NumpadEnterEnter13NumpadEqual"="12NumpadComma","194NumpadParenLeft"("0NumpadParenRight")"0
F키24
F1은 112, F2는 113 … 차례로 이어집니다.
F1F1112F2F2113F3F3114F4F4115F5F5116F6F6117F7F7118F8F8119F9F9120F10F10121F11F11122F12F12123F13F13124F14F14125F15F15126F16F16127F17F17128F18F18129F19F19130F20F20131F21F21132F22F22133F23F23134F24F24135
이동8
글자를 찍지 않고 커서만 옮깁니다.
ArrowUpArrowUp38ArrowDownArrowDown40ArrowLeftArrowLeft37ArrowRightArrowRight39HomeHome36EndEnd35PageUpPageUp33PageDownPageDown34
편집16
지우고 넣고 줄을 바꾸는 키들입니다.
EnterEnter13TabTab9Space"Space"32BackspaceBackspace8DeleteDelete46InsertInsert45UndoUndo0CutCut0CopyCopy0PastePaste0AgainAgain0FindFind0HelpHelp47SelectSelect41OpenOpen43PropsProps0
수정 키9
혼자서는 아무 일도 하지 않고 다른 키에 얹힙니다. 좌우가 같은 keyCode를 씁니다.
ShiftLeftShift16ShiftRightShift16ControlLeftControl17ControlRightControl17AltLeftAlt18AltRightAlt18MetaLeftMeta91MetaRightMeta92FnFn0
잠금3
한 번 누르면 상태가 바뀌어 머무릅니다.
CapsLockCapsLock20NumLockNumLock144ScrollLockScrollLock145
시스템24
창과 화면을 다루는 키들입니다.
EscapeEscape27PrintScreenPrintScreen44PausePause19ContextMenuContextMenu93AudioVolumeMuteAudioVolumeMute173AudioVolumeDownAudioVolumeDown174AudioVolumeUpAudioVolumeUp175MediaTrackNextMediaTrackNext176MediaTrackPreviousMediaTrackPrevious177MediaStopMediaStop178MediaPlayPauseMediaPlayPause179LaunchMailLaunchMail180LaunchApp2LaunchApp2183LaunchApp1LaunchApp1182BrowserBackBrowserBack166BrowserForwardBrowserForward167BrowserRefreshBrowserRefresh168BrowserStopBrowserStop169BrowserSearchBrowserSearch170BrowserFavoritesBrowserFavorites171BrowserHomeBrowserHome172PowerPower0SleepSleep95WakeUpWakeUp0
입력기7
입력기를 바꾸는 키 — 한/영, 한자, 일본어 변환이 여기 듭니다.
Lang1HangulMode21Lang2HanjaMode25ConvertConvert28NonConvertNonConvert29KanaModeKanaMode21IntlRo"\"193IntlYen"\"255
읽는 방법
- code는 자리, key는 찍히는 글자입니다. 단축키를 만들 때는 code로 견주세요.
- keyCode는 폐기됐습니다. 옛 코드를 읽을 때만 쓰세요.
- 왼쪽과 오른쪽 Shift는 keyCode가 같고 location으로 갈립니다.
- 숫자 줄의 1과 숫자판의 1은 다른 키입니다 — 49와 97입니다.
자주 묻는 질문
Qcode와 key 중 무엇을 써야 하나요?
단축키처럼 자리를 잡아야 하면 code, 무엇이 입력됐는지 알아야 하면 key입니다. code는 자판이 바뀌어도 그대로입니다.
QkeyCode는 왜 쓰지 말라고 하나요?
표준에서 빠졌고 브라우저마다 값이 갈립니다. 기호 키에서 특히 그렇습니다.
QEnter의 키 코드는 몇 번인가요?
keyCode는 13이고 code는 Enter입니다. 숫자판의 Enter는 code가 NumpadEnter이지만 keyCode는 똑같이 13입니다.
Q왼쪽 Shift와 오른쪽 Shift를 어떻게 구별하나요?
keyCode는 둘 다 16이라 구별되지 않습니다. code(ShiftLeft·ShiftRight)나 location(1·2)을 보세요.
Q한글 자판에서도 code가 같나요?
같습니다. ㅁ이 찍히는 자리를 눌러도 code는 KeyA입니다 — 자리를 가리키는 값이기 때문입니다.