How To Handle Keyboard Event In JavaScript

The events 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 character key and gives char-code.

Here is an example of handling keyboard event in JavaScript with keydown and keyup event.

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> 

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 keycode of respective key entered in textbox.

Focus this Textbox and type something

Press any Key: KeyCode:

The HTML and JavaScript code used to show the uses of keycode property is given below.

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>

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:

The HTML and JavaScript code used to show the uses of charcode property is given below.

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:

The HTML and JavaScript code used to show the uses of which property is given below.

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>

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 ,Alt or Meta key:


The HTML and JavaScript code used to show the uses of shiftKey, ctrlKey, altKey and metaKey property is given below.

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>