JavaScript Keyboard Events

Interactions between HTML and JavaScript are defined by events. From loading a page to pressing any key or resizing a window etc are all considered events. JavaScript events are included in HTML DOM version 2 and version 3. There is a vast category of JavaScript events that can happen by manipulating a web page through a user or the browser, however, in this write-up, we will be talking specifically about events that happen using a keyboard.

JavaScript Keyboard Events

The events that happen when a keyboard key is pressed are referred to as JavaScript Keyboard Events and these are a part of KeyboardEvent Object. The events that fall under the category of keyboard events are:

onkeydown Event
onkeypress Event
onkeyup Event

Here we will throw light on these above-mentioned events in detail.

1. onkeydown Event

When a keyboard key is being pressed the onkeydown event happens. It bubbles and is also cancelable. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and are included in DOM version 2.

Syntax
The syntax of the onekeydown event is as follows

HTML Syntax
<element onekeydown=”functionName()”>

JavaScript Syntax
object.onkeydown = function(){script};

JavaScript addEventListener() Syntax
object.addEventListener(“keydown”, script);

Example

<!DOCTYPE html>
<html>
<body>

<input type="text" id="tutorial" onkeydown="functionName()">

<script>
function functionName() {
alert("You just pressed a key while inside the input field!");
}
</script>
</body>
</html>

In the above example, an input field has been created. While inside the input field, when the user presses a keyboard key, the onkeydown event will trigger, and the background color of the input field will change to pink.

Output

Before pressing a keyboard key.

After pressing a keyboard key inside the input field.

2. onkeypress Event

When a keyboard key is being pressed the onkeypress event happens. It bubbles and is also cancelable. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and are included in DOM version 2.

Syntax
The syntax of the onekeypress event is as follows

HTML Syntax
<element onekeypress=”functionName()”>

JavaScript Syntax
object.onkeypress = function(){script};

JavaScript addEventListener() Syntax
object.addEventListener(“keypress”, script);

Example

<!DOCTYPE html>
<html>
<body>

<input type="text" id="tutorial" onkeypress="functionName()">

<script>
function functionName() {
document.getElementById("tutorial").style.backgroundColor = "pink";
}
</script>

</body>
</html>

In the above example, an input field is being created. When a user presses a keyboard key while being inside the input field, the onkeypress event will happen and the background color of the input field will change to pink.

Output
Before pressing a key.

After pressing a keyboard key, the input field background color changes to pink.

3. onkeyup Event

When a keyboard key is released the onkeyup event happens. It bubbles and is also cancelable. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and are included in DOM version 2.

Syntax
The syntax of the onekeyups event is as follows

HTML Syntax
<element onekeyup=”functionName()”>

JavaScript Syntax
object.onkeyup = function(){script};

JavaScript addEventListener() Syntax
object.addEventListener(“keyup”, script);

Example

<!DOCTYPE html>
<html>
<body>

<input type="text" id="tutorial" onkeydown="keydownFunction()" onkeyup="keyupFunction()">

<script>
function keydownFunction() {
document.getElementById("tutorial").style.backgroundColor = "pink";
}

function keyupFunction() {
document.getElementById("tutorial").style.backgroundColor = "yellow";
}
</script>

</body>
</html>

In the above example, both onkeydown and onkeyup events are demonstrated. An input field is being created. When you press a key, the onkeydown event gets triggered and the input field background color will turn to pink and when you release a key the onkeyup event will trigger and the background color will become yellow.

Output
When the user presses a key in the input field.

After releasing the key.

Conclusion

Events that occur due to pressing a keyboard button are referred to as JavaScript mouse events. Events that are classified into the category of JavaScript keyboard events are onkeydown Event, onkeypress Event, onkeyup Event. All these events have different purposes, and they are discussed in detail along with appropriate examples, in this write-up.

JavaScript Keyboard Events