How To Handle Keyboard Event In JavaScript

The keyboard event in JavaScript which are fired form keyboard are keydown, keypress and keyup. The keydown and keyup events are fired when the user presses or releases a key on the keyboard. Despite its name, “keydown” fires not only when the key is physically pushed down. When a key is pressed and held, the event fires again every time the key repeats. The “keydown” and “keyup” events give you information about the physical key that is being pressed. Keypress event fired when the user presses the character key and gives char-code. Here is an example of handling keyboard events in JavaScript with keydown and keyup events.

This text background turns lime when you hold the L key.

The HTML and JavaScript code used to display this keyboard event is given below.

HTML Code:

<p id="para1">This text background turns lime when you hold the L key.</p>

JavaScript Code:

<script>
var para1=document.getElementById('para1');
addEventListener("keydown", function(event) {
if (event.keyCode == 76)
para1.style.background = "lime";
});
addEventListener("keyup", function(event) {
if (event.keyCode == 76)
para1.style.background = "";
});
</script>

Also Read: How To Handle Mouse Event In JavaScript

Keyboard Event Properties

The keyboard event properties used to handle keyboard event in JavaScript are keycode, charcode and which.

Keycode

The event object associated with keydown and keyup events has a numeric keycode property that specifies which key was pressed. For keys that generate printable characters, the keycode is generally the unicode encoding of the primary character that appears on the key. Letter keys always generate upercase keycode values, regardless of the state of the shift key since that is what appears on the physical key. Similarly, number keys always generate keycode values for the digit that appears on the key, even if you are holding down shift in order to type a punctuation character.

For non-printing keys, the key code property will be some other value. The keycode values have never been standardized, but reasonable cross-browser compatibility is possible. Here is an example to show the uses of keycode property, which displays the keycode of the respective key entered in the textbox.

Focus this Textbox and type something

Press any Key: KeyCode:

HTML Code:

<p>Focus this Textbox and type something</p>
Press any Key:<input type="text" id="text1"></input>
KeyCode:<input type="text" id="key1"></input>

JavaScript Code:

<script>
var text1=document.getElementById('text1');
var key1=document.getElementById('key1');
text1.addEventListener("keydown", function(event) {
text1.value="";
key1.value=event.keyCode;
});
</script>

Read Also: How To Handle Document Load Event in JavaScript

Charcode

The charCode property is defined for keypress and contains the character code.Here is an example to show the uses of charcode property, which displays charcode of respective character entered in textbox.

Focus this Textbox and type something

Enter Character: CharCode:

HTML Code:

<p>Focus this Textbox and type something</p>
Enter Character:<input type="text" id="text2"></input>
CharCode:<input type="text" id="key2"></input>

JavaScript Code:

<script>
var text2=document.getElementById('text2');
var key2=document.getElementById('key2');
text2.addEventListener("keypress", function(event) {
text2.value="";
key2.value=event.charCode;
});
</script>

Which

It is a non-standard property, the hybrid of charCode and keyCode can be used for both.Here is an example to show the uses of which property, which displays keycode for keydown and keyup event and charcode for keypress event of respective key entered in textbox.

Focus this Textbox and type something

Enter Character: CharCode:

HTML Code:

<p>Focus this Textbox and type something</p>
Enter Character:<input type="text" id="text3"></input>
CharCode:<input type="text" id="key3"></input>

JavaScript Code:

<script>
var text3=document.getElementById('text3');
var key3=document.getElementById('key3');

text3.addEventListener("keyup", function(event) {
text3.value="";
key3.value=event.which;
});
</script>

Also Read: How To Cancel Event Handlers in JavaScript

ShiftKey, ctrlKey, altKey, metaKey

Like mouse event objects, key event objects have altkey, ctrlkey, metakey and shift key properties, which are set to true if the corresponding modifier key is held down when the event occurs.Here is an example to show the uses of which property, which displays keycode for keydown and keyup event and charcode for keypress event of respective key entered in textbox.

Press Shift, Ctrl or Alt key:

HTML Code:

<p>Press Shift, Ctrl or Alt key:<span style="color:red;font-size:22px;" id="msg"></span></p>

JavaScript Code:

<script>
var msg=document.getElementById('msg');
document.addEventListener("keydown", function(event) {
if (event.ctrlKey)
msg.innerHTML="You have pressed Ctrl key";
else if (event.altKey)
msg.innerHTML="You have pressed Alt key";
else if (event.shiftKey)
msg.innerHTML="You have pressed Shift key";
else if (event.metaKey)
msg.innerHTML="You have pressed Meta key";
});
</script>

Read Next:How To Handle Drag and Drop Event In JavaScript