Javascript keyboard events

The javascript provided keyboard events for the selection, type, and use of particular forms of information. The event occurs when the key presses the key up and the key down as per action. We can use the html tag, javascript function, or addEventListener event. It is keyboard functionality to work with the user interactive form and other elements. The KeyboardEvent object is responsible for keyboard events.

Types of the keyboard event

The javascript provides the following types of events to use keyboard functionality.

Keydown event: Keydown occurs when the key is depressed and continuously repeats if the key is depressed for an extended time.
Keyup event: When a punctuation, numeric, or alphabetic key is pushed, then the keyup event is triggered and starts functionality.
Keypress event: When the key is released from the user, the keyup event occurs and starts functionality. Some browsers no longer support Keypress Event.

Javascript keydown event

When the key is pressed and still key in the down place of the keyboard, then the Javascript key down event work on the application. The keyboard event works for input values of the web page, like forms, search bar, and other elements.

Syntax

The following key-down event syntax shows the keyboard key position and its application.

In Html

In Javascript

<script>
var demoObj = document.getElementById("input_class");
demoObj.onkeydown = keyDownFunction;
</script>

In addEventListener event

<script>
var demoObj = document.getElementById("input_class");
demoObj.addEventListener("keydown", keyDownFunction);
</script>

Examples

The javascript key-down function uses html tag and a javascript function.

Example 1

The alert tab shows the user-defined functionality after the key-down function works. The input tag of the user interactive element

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "text" id = "input_class" placeholder = "write here." onkeydown = "keyDownFunction()">
<p id = "datas"> </p>
<script>
function keyDownFunction() {
alert("JavaScript keyDown function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
}
</script>
</body>
</html>

Output

The alert box shows the output of the keydown event.

Example 2

The javascript key-down function uses html tag and a javascript function. We can change the style tag of the container after the key-down function.

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "text" id = "input_class" placeholder = "write here.">
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("input_class");
demoObj.onkeydown = keyDownFunction;
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

Output

The alert box shows the output of the keydown event.

Example 3

The addEventListener event uses for the key down event using javascript. The key-down event works on single or multiple radio buttons using an input tag.

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<div id = "demoDIV" >
The javascript key-down event works after pressing the key and key in the down position on the specific tag.
</div>
<input type = "radio" id = "input_class" placeholder = "write here."> Good
<input type = "radio" id = "input_class" placeholder = "write here."> Better
<input type = "radio" id = "input_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("input_class");
demoObj.addEventListener("keydown", keyDownFunction);
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keyDown function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}  
</script>
</body>
</html>

Output

The alert box shows the output of the keydown event.

Javascript keyup event

When the key is pressed and still key in the original place of the keyboard, then the Javascript key-up event work on the application. The keyboard event works for input values of the web page, like forms, search bar, and other elements.

Syntax

The following keyup event syntax shows the keyboard key position and its application.

In Html

In Javascript

<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeyup = keyUpFunction;
</script>

In addEventListener event

<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keyup", keyUpFunction);
</script>

Examples

The javascript keyup function uses html tag and a javascript function.

Example 1

The alert message shows the user-defined functionality after the keyup function works.

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
</div>
<input type = "text" id = "key_class" placeholder = "write here." onkeyup = "keyUpFunction()">
<p id = "datas"> </p>
<script>
function keyUpFunction() {
alert("JavaScript keyUp function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
}
</script>
</body>
</html>

Output

The alert box shows the output of the keydown event.

Example 2

The javascript keyup function uses html tag and a javascript function. We can change the style tag of the container after the keyup function.

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
<textarea id = "key_class" placeholder = "write message here."> </textarea>
<p id = "datas"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeyup = keyUpFunction;
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px solid red";
document.getElementById("demoDIV").style.color= "Green";
}
</script>
</body>
</html>

Output

The web page shows the output of the keyup event.

Example 3

The addEventListener event uses for the keyup event using javascript. The keyup event works on the single or multiple checkbox buttons using an input tag.

<!DOCTYPE html>
<html>
<head>
<title> keyup function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the up position on the specific tag.
</div>
<input type = "checkbox" id = "key_class" placeholder = "write here."> Good
<input type = "checkbox" id = "key_class" placeholder = "write here."> Better
<input type = "checkbox" id = "key_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keyup", keyUpFunction);
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

Output

The web page shows the output of the keyup event.

Javascript keypress event

When the key is pressed and still key in the original place of the keyboard, then Javascript key press event work on the application. The keyboard event works for input values of the web page, like forms, search bar, and other elements.

Syntax

The following keypress event syntax shows the keyboard key position and its application.

In Html

In Javascript

<script>
demoObj.onkeypress = keyPressFunction;
</script>

In addEventListener event

<script>
demoObj.addEventListener("keypress", keyPressFunction);
</script>

Examples

The javascript keypress function uses html tag and javascript function.

Example 1

The alert message shows the user-defined functionality after the keypress function works. You can see the keypress function works on the input tag but does not work on the button tag. If you use submit type in the input tag, then also event does not work.

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag.
</div>
<input type = "text" id = "key_class" placeholder = "write here." onkeypress = "keyPressFunction()">
<button type = "button" onkeypress = "keyPressFunction2()">
Click here... </button>
<p id = "datas"> </p>
<script>
function keyPressFunction() {
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
}
function keyPressFunction2() {
alert("JavaScript keyPress function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
}
</script>
</body>
</html>

Output

The alert box shows the output of the keypress event.

Example 2

The javascript keypress function uses html tag and javascript function. We can change the style tag of the container after the keypress function. The input tag of the text type and texture tag works for the key press function.

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag. <br>
<textarea id = "key_class" placeholder = "write message here."> </textarea>
<p id = "datas"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeypress = keyPressFunction;
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px solid yellow";
document.getElementById("demoDIV").style.color= "Green";
}
</script>
</body>
</html>

Output

The web page shows the output of the keypress event.

Example 3

The addEventListener event uses for the keypress event using javascript. The keypress event works on the single or multiple checkbox buttons using an input tag.

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript keypress event works after pressing the key and key in the press position on the specific tag.
</div>
<input type = "checkbox" id = "key_class" placeholder = "write here."> Good
<input type = "checkbox" id = "key_class" placeholder = "write here."> Better
<input type = "checkbox" id = "key_class" placeholder = "write here."> Best
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("key_class");
demoObj.addEventListener("keypress", keyPressFunction);
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
document.getElementById("demoDIV").style.color= "orange";
}
</script>
</body>
</html>

Output

The web page shows the output of the keypress event.

KeyboardEvent flowchart

The following sequence is used to operate KeyboardEvent events on the web page:

The key-down event is the first event of the keyboard function. If a key down generates a character and it holds down longer, then the event occurrence repeats on the page.
The keypress event is second fired and repeated as long as the key is depressed on the input tag. It works each time key is pressed on the input tag.
The keyup event is the last keyboard function. When the key is released from the keyboard, the function operates on the page.

Example

The following example displays the keyboard event with the flowchart functionality. We can get the keyboard event with the values and which event triggered the value. We can get all the functions together with the output value. Here, we can use the addEventListener event or html function tag to operate functionality.

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<div id = "demoDIV" >
The javascript key down, keypress and keyup events work after entering, pressing, and releasing keys, respectively, in the javascript using the specific tag. <br>
<input type="text" id="key_class" placeholder="write message here." />
<p id = "datas"> </p>
<p id = "status"> </p>
<p id = "status1"> </p>
<p id = "status2"> </p>
</div>
<script>
var demoObj = document.getElementById("key_class");
demoObj.onkeydown = keyDownFunction;
demoObj.onkeypress = keyPressFunction;
demoObj.onkeyup = keyUpFunction;
function keyDownFunction() {
console.log("JavaScript keyDown function!!");
document.getElementById("datas").innerHTML = "JavaScript keydown function activates successfully!!!";
document.getElementById("status").innerHTML = `<b>keydown: </b> ${event.key} � <b>keyCode: </b> ${event.code}  <br>`;
}
function keyPressFunction() {
console.log("JavaScript keyPress function!!");
document.getElementById("datas").innerHTML = "JavaScript keyPress function activates successfully!!!";
document.getElementById("status1").innerHTML = `<b>keypress: </b> ${event.key} � <b>keyCode: </b> ${event.code}  <br>`;
}
function keyUpFunction() {
console.log("JavaScript keyUp function!!");
document.getElementById("datas").innerHTML = "JavaScript keyup function activates successfully!!!";
document.getElementById("status2").innerHTML = `<b>keyup: </b> ${event.key} � <b>keyCode: </b> ${event.code}  <br>`;
}
</script>
</body>
</html>

Output

The web page shows as the output the key down, keypress, and keyup events.

A common use of the keyboard event

Computer gaming is one of the most popular applications of keyboard events nowadays. The majority of browser-based games demand keyboard input in some way. Depending on the keyboard event, game objects respond differently. Additionally, this tutorial will show how keyboard events are implemented in games.

Example

The following example displays the keyboard event with the flowchart functionality. We can get the keyboard event in the gaming application using the javascript functions.

<!DOCTYPE html>
<html>
<head>
<title> keypress function in javascript </title>
<style>
.datas {
background-color: green;
}
</style>
</head>
<body>
<h2> JavaScript keypress Method </h2>
<p>Use the arrow keys to control the square object.</p>
<svg width="200px" height="200px" class="datas">
<rect id="objectval1" x="10" y="10" width="15" height="15" fill="yellow" />
</svg>
<script>
// Declare and assign variables.
let objectval1Size = {
width: 15,
height: 15
};
let position = {
x: 10,
y: 10
};
let moveRate = 10;
let objectval1 = document.getElementById("objectval1");
function updateYPosition(distance) {
position.y = position.y - distance;
// Update the y-axis position at the edge.
if (position.y < 0) {
position.y = 249;
} else if (position.y > 249) {
position.y = 0;
}
}
// Update x-axis position.
function updateXPosition(distance) {
position.x = position.x + distance;
// Update the x-axis position at the edge.
if (position.x < 0) {
position.x = 499;
} else if (position.x > 499) {
position.x = 0;
}
}
function refreshEventPosition() {
let x_val = position.x - (objectval1Size.width/2);
let y_val = position.y - (objectval1Size.height/2);
let transform = "translate(" + x_val + " " + y_val + ")";
objectval1.setAttribute("transform", transform);
}
window.addEventListener("keydown", function(event) {
if (event.defaultPrevented) {
return;
}
if (event.code === "ArrowDown"){
// Handle key "down"
updateYPosition(-moveRate);
} else if (event.code === "ArrowUp"){
// Handle key "up."
updateYPosition(moveRate);
} else if (event.code === "ArrowLeft"){
// Handle key "left"
updateXPosition(-moveRate);
} else if (event.code === "ArrowRight"){
// Handle key "right."
updateXPosition(moveRate);
}
refreshEventPosition();
event.preventDefault();
}, true);
</script>
</body>
</html>

Output

The web page shows the output of the key down, keypress, and keyup events in the game application.

Different key press

The keyboard events work on alphabetical, numerical, and special character key events. We can get the other keys event such as an alt, control, arrow, tab, caps lock, etc.

Example

The example shows which key is pressed from the keyboard and shows event information. We can use other keyboard events and javascript functions to get event information.

<!DOCTYPE html>
<html>
<head>
<title> keydown function in javascript </title>
<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keydown Method </h2>
<h4> The altKey Property </h4>
<p> We can Press a key on the keyboard in the input field to get the respective key is the ALT key or not.</p>
<input type = "text" onkeydown = "keyDownFunction(event)">
<p id = "demos"></p>
<script>
function keyDownFunction(event) {
const var1 = document.getElementById("demos");
if (event.altKey) {
var1.innerHTML = "The ALT key press successfully with keydown event!";
} else {
var1.innerHTML = "The other press (ALT key does not) successfully with keydown event!!";
}
}
</script>
</body>
</html>

Output

The keydown event shows alt keys functionality.

Conclusion

The keyboard events work when the key is operated for the user's interactive functionality. The key works with the press, up, and down events on the web page.

Next Topic#

← prev next →