How to detect keypress events? Answer: You can detect using JavaScript Keycode function.

Ever wondered, how many games are there. How do they move by pressing the button? Or how the games system detect which button we pressing. Many websites use the keycode program for scroll animation or to show their animated info.

Each key has its unique code to detect them. Maybe there are 161 key codes, I am not sure but I am using 161. In JS you can detect keys with the help of keydown function.

In web development this program is very useful, You may need it many times. Suppose you are creating a calculator program, you want your program works in both ways. With On-Screen keyboard and dedicated hardware keyboard. Then you will need to detect keypress events. The simple to detect keys, use javascript keycodes functions.

So, Today I am sharing a program about detect keycode and key on keypress event using JavaScript. Now you don’t have to remember key codes or search every time. Using this program when you press a key then you can see key and keycode on your screen. After some modification, you also can use it to your different ko keypress event app.

Preview Of Keypress Event Detector – Detect Pressed Key

Let’s see a preview of this program in this video. When I press any key, pressed key and its code will appear on the screen.

Now you can see how this program looks like. Its detect pressed keys and showing their info. If you like this then go for the source code.

You May Also Like:

JavaScript Keycode Program Source Code

As always, Before sharing source code lets talk about this function. I used JavaScripts .addEventListener("keydown", event => command for creating this ( know about Keydown Event ). I used bootstrap also to creating a layout, & used little bit CSS. First, I define key codes and their value in a variable, then this program checks all keys with the help of event listener function. If any pressed key matched with codes given in variable then javascript display those keys info.

For creating this program, You have to create 3 files. One for HTML, One for CSS, & Last for JavaScript or JS. Follow the steps to successfully create this.

index.html

Create an HTML file named ‘index.html‘ and put these code given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Keycode Detecter JavaScript</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="row text-center"> <div class="col-md-6 offset-md-3"> <h1 class="text-center" id="keyCodeValue"></h1> <div class="key" id="keyBlock"> <div class="card-block"> <blockquote class="card-blockquote"> <h3 id="buttonPressed"></h3> </blockquote> </div> </div> </div> </div> </div> <script src="function.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> Keycode Detecter JavaScript </title> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > <link rel = "stylesheet" href = "css/style.css" > </head> <body> <div class = "container" > <div class = "row text-center" > <div class = "col-md-6 offset-md-3" > <h1 class = "text-center" id = "keyCodeValue" > </h1> <div class = "key" id = "keyBlock" > <div class = "card-block" > <blockquote class = "card-blockquote" > <h3 id = "buttonPressed" > </h3> </blockquote> </div> </div> </div> </div> </div> <script src = "function.js" > </script> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css body { margin-top: 100px; background: #41BDF1; color: #EEEEEE; } h1 { font-size: 300px; } .key{ display: inline-block; color: #5E5E5E; font: bold 20px arial; text-decoration: none; text-align: center; margin: 20px auto; padding: 15px 20px; background: #EFF0F2; border-radius: 20px; border-top: 1px solid #F5F5F5; box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333; text-shadow: 0px 1px 0px #F5F5F5; text-transform: uppercase; } .footer{ position: absolute; text-align: center; right: 0; bottom:0; left: 0; padding: 1rem; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 body { margin-top : 100px ; background : #41BDF1 ; color : #EEEEEE ; } h1 { font-size : 300px ; } .key { display : inline-block ; color : #5E5E5E ; font : bold 20px arial ; text-decoration : none ; text-align : center ; margin : 20px auto ; padding : 15px 20px ; background : #EFF0F2 ; border-radius : 20px ; border-top : 1px solid #F5F5F5 ; box-shadow : inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333 ; text-shadow : 0px 1px 0px #F5F5F5 ; text-transform : uppercase ; } .footer { position : absolute ; text-align : center ; right : 0 ; bottom : 0 ; left : 0 ; padding : 1rem ; }

function.js

The final thing, Create a JavaScript file named ‘function.js‘ and copy codes from there, paste on JS file.

function.js /* Code By Web Dev Trick ( https://webdevtrick.com) */ keyCodes = { 3 : "break", 8 : "backspace", 9 : "tab", 12 : 'clear', 13 : "enter", 16 : "shift", 17 : "ctrl", 18 : "alt", 19 : "pause/break", 20 : "caps lock", 27 : "escape", 28 : "conversion", 29 : "non-conversion", 32 : "spacebar", 33 : "page up", 34 : "page down", 35 : "end", 36 : "home ", 37 : "left arrow ", 38 : "up arrow ", 39 : "right arrow", 40 : "down arrow ", 41 : "select", 42 : "print", 43 : "execute", 44 : "Print Screen", 45 : "insert ", 46 : "delete", 48 : "0", 49 : "1", 50 : "2", 51 : "3", 52 : "4", 53 : "5", 54 : "6", 55 : "7", 56 : "8", 57 : "9", 58 : ":", 59 : "semicolon (firefox), equals", 60 : "<", 61 : "equals (firefox)", 63 : "ß", 64 : "@ (firefox)", 65 : "a", 66 : "b", 67 : "c", 68 : "d", 69 : "e", 70 : "f", 71 : "g", 72 : "h", 73 : "i", 74 : "j", 75 : "k", 76 : "l", 77 : "m", 78 : "n", 79 : "o", 80 : "p", 81 : "q", 82 : "r", 83 : "s", 84 : "t", 85 : "u", 86 : "v", 87 : "w", 88 : "x", 89 : "y", 90 : "z", 91 : "Windows Key / Left ⌘ ", 92 : "right window key ", 93 : "Windows Menu / Right ⌘", 96 : "numpad 0 ", 97 : "numpad 1 ", 98 : "numpad 2 ", 99 : "numpad 3 ", 100 : "numpad 4 ", 101 : "numpad 5 ", 102 : "numpad 6 ", 103 : "numpad 7 ", 104 : "numpad 8 ", 105 : "numpad 9 ", 106 : "multiply ", 107 : "add", 108 : "numpad period (firefox)", 109 : "subtract ", 110 : "decimal point", 111 : "divide ", 112 : "f1 ", 113 : "f2 ", 114 : "f3 ", 115 : "f4 ", 116 : "f5 ", 117 : "f6 ", 118 : "f7 ", 119 : "f8 ", 120 : "f9 ", 121 : "f10", 122 : "f11", 123 : "f12", 124 : "f13", 125 : "f14", 126 : "f15", 127 : "f16", 128 : "f17", 129 : "f18", 130 : "f19", 131 : "f20", 132 : "f21", 133 : "f22", 134 : "f23", 135 : "f24", 144 : "num lock ", 145 : "scroll lock", 160 : "^", 161: '!', 163 : "#", 164: '$', 165: 'ù', 166 : "page backward", 167 : "page forward", 169 : "closing paren (AZERTY)", 170: '*', 171 : "~ + * key", 173 : "minus (firefox), mute/unmute", 174 : "decrease volume level", 175 : "increase volume level", 176 : "next", 177 : "previous", 178 : "stop", 179 : "play/pause", 180 : "e-mail", 181 : "mute/unmute (firefox)", 182 : "decrease volume level (firefox)", 183 : "increase volume level (firefox)", 186 : "semi-colon", 187 : "equal sign ", 188 : "comma", 189 : "dash ", 190 : "period ", 191 : "forward slash / ç", 192 : "grave accent / ñ / æ", 193 : "?, / or °", 194 : "numpad period (chrome)", 219 : "open bracket ", 220 : "back slash ", 221 : "close bracket / å", 222 : "single quote / ø", 223 : "`", 224 : "left or right ⌘ key (firefox)", 225 : "altgr", 226 : "< /git >", 230 : "GNOME Compose Key", 231 : "ç", 233 : "XF86Forward", 234 : "XF86Back", 240 : "alphanumeric", 242 : "hiragana/katakana", 243 : "half-width/full-width", 244 : "kanji", 255 : "toggle touchpad" }; document.getElementById('keyBlock').style.visibility = 'hidden'; document.addEventListener('keydown', event => { buttonPressed = event.keyCode; document.getElementById('keyCodeValue').innerHTML = buttonPressed; document.getElementById('keyBlock').style.visibility = 'visible'; document.getElementById('buttonPressed').innerHTML = keyCodes[buttonPressed] || "Not sure what you pressed!"; }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 /* Code By Web Dev Trick ( https://webdevtrick.com) */ keyCodes = { 3 : "break" , 8 : "backspace" , 9 : "tab" , 12 : 'clear' , 13 : "enter" , 16 : "shift" , 17 : "ctrl" , 18 : "alt" , 19 : "pause/break" , 20 : "caps lock" , 27 : "escape" , 28 : "conversion" , 29 : "non-conversion" , 32 : "spacebar" , 33 : "page up" , 34 : "page down" , 35 : "end" , 36 : "home " , 37 : "left arrow " , 38 : "up arrow " , 39 : "right arrow" , 40 : "down arrow " , 41 : "select" , 42 : "print" , 43 : "execute" , 44 : "Print Screen" , 45 : "insert " , 46 : "delete" , 48 : "0" , 49 : "1" , 50 : "2" , 51 : "3" , 52 : "4" , 53 : "5" , 54 : "6" , 55 : "7" , 56 : "8" , 57 : "9" , 58 : ":" , 59 : "semicolon (firefox), equals" , 60 : "<" , 61 : "equals (firefox)" , 63 : "ß" , 64 : "@ (firefox)" , 65 : "a" , 66 : "b" , 67 : "c" , 68 : "d" , 69 : "e" , 70 : "f" , 71 : "g" , 72 : "h" , 73 : "i" , 74 : "j" , 75 : "k" , 76 : "l" , 77 : "m" , 78 : "n" , 79 : "o" , 80 : "p" , 81 : "q" , 82 : "r" , 83 : "s" , 84 : "t" , 85 : "u" , 86 : "v" , 87 : "w" , 88 : "x" , 89 : "y" , 90 : "z" , 91 : "Windows Key / Left ⌘ " , 92 : "right window key " , 93 : "Windows Menu / Right ⌘" , 96 : "numpad 0 " , 97 : "numpad 1 " , 98 : "numpad 2 " , 99 : "numpad 3 " , 100 : "numpad 4 " , 101 : "numpad 5 " , 102 : "numpad 6 " , 103 : "numpad 7 " , 104 : "numpad 8 " , 105 : "numpad 9 " , 106 : "multiply " , 107 : "add" , 108 : "numpad period (firefox)" , 109 : "subtract " , 110 : "decimal point" , 111 : "divide " , 112 : "f1 " , 113 : "f2 " , 114 : "f3 " , 115 : "f4 " , 116 : "f5 " , 117 : "f6 " , 118 : "f7 " , 119 : "f8 " , 120 : "f9 " , 121 : "f10" , 122 : "f11" , 123 : "f12" , 124 : "f13" , 125 : "f14" , 126 : "f15" , 127 : "f16" , 128 : "f17" , 129 : "f18" , 130 : "f19" , 131 : "f20" , 132 : "f21" , 133 : "f22" , 134 : "f23" , 135 : "f24" , 144 : "num lock " , 145 : "scroll lock" , 160 : "^" , 161 : '!' , 163 : "#" , 164 : '$' , 165 : 'ù' , 166 : "page backward" , 167 : "page forward" , 169 : "closing paren (AZERTY)" , 170 : '*' , 171 : "~ + * key" , 173 : "minus (firefox), mute/unmute" , 174 : "decrease volume level" , 175 : "increase volume level" , 176 : "next" , 177 : "previous" , 178 : "stop" , 179 : "play/pause" , 180 : "e-mail" , 181 : "mute/unmute (firefox)" , 182 : "decrease volume level (firefox)" , 183 : "increase volume level (firefox)" , 186 : "semi-colon" , 187 : "equal sign " , 188 : "comma" , 189 : "dash " , 190 : "period " , 191 : "forward slash / ç" , 192 : "grave accent / ñ / æ" , 193 : "?, / or °" , 194 : "numpad period (chrome)" , 219 : "open bracket " , 220 : "back slash " , 221 : "close bracket / å" , 222 : "single quote / ø" , 223 : "`" , 224 : "left or right ⌘ key (firefox)" , 225 : "altgr" , 226 : "< /git >" , 230 : "GNOME Compose Key" , 231 : "ç" , 233 : "XF86Forward" , 234 : "XF86Back" , 240 : "alphanumeric" , 242 : "hiragana/katakana" , 243 : "half-width/full-width" , 244 : "kanji" , 255 : "toggle touchpad" } ; document . getElementById ( 'keyBlock' ) . style . visibility = 'hidden' ; document . addEventListener ( 'keydown' , event = > { buttonPressed = event . keyCode ; document . getElementById ( 'keyCodeValue' ) . innerHTML = buttonPressed ; document . getElementById ( 'keyBlock' ) . style . visibility = 'visible' ; document . getElementById ( 'buttonPressed' ) . innerHTML = keyCodes [ buttonPressed ] || "Not sure what you pressed!" ; } ) ;

That’s It. Now you have successfully created a JavaScript keycode program which detects keypress event. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.