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 →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}

JavaScript Tutorial

JavaScript Basics

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript Validation

JavaScript OOPs

JavaScript Cookies

JavaScript Events

Exception Handling

JavaScript Misc

JavaScript Advance

Differences

Questions

Lodash

MCQ

Interview Questions

Javascript keyboard events

Types of the keyboard event

Javascript keydown event

Examples

Javascript keyup event

Examples

Javascript keypress event

Examples

KeyboardEvent flowchart

Example

A common use of the keyboard event

Example

Different key press

Example

Conclusion

Feedback

Help Others, Please Share

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

Training For College Campus