UNDERSTANDING KEYBOARD EVENTS IN JAVASCRIPT

5 April, 2023

Contributors

Odukwe Daniel

@kingdanny295341

In JavaScript, keyboard events are used to detect when a user presses or releases a key on their keyboard. This is useful in various scenarios, particularly in web applications where users may need to input text or navigate through keyboard shortcuts.

This article will explore the various keyboard events available in JavaScript,keyboard event properties, and how they function. There are three main types of keyboard events in JavaScript: keydown, keyup, and keypress.

^{The Keydown Event}

The keydown event is triggered when a key on the keyboard is pressed down. This event is useful to know when a user starts typing or holds down a button for a specific function.

To handle the keydown event in JavaScript, use the following code:

document.addEventListeiner(‘keydown’,function(event) {
			if (event.key === ‘Enter’) {
				console.log(‘Enter key was pressed’);
}
});

The Keyup Event

The keyup event is triggered when a pressed key has been released. This event occurs after the keydown event and detects when a user releases a key that was held down.

To handle keyup events in JavaScript, use the following code:

document.addEventListeiner(keyup’,function(event) { 
	if (event.key === 'Escape') { 
		console.log('Escape key was pressed'); 
} 
});

The Keypress Event

The keypress event is triggered when a key on the keyboard has been pressed, and a character is generated. The keypress event detects when the user has entered a specific character or sequence of characters.

To handle the keypress event, use the following code:

document.addEventListeiner('keypress', function(event) {
	 if (event.key === 'a' { 
	 	console.log( 'a key was pressed'); 
	 	
} 
});

keyboard Event Properties

when keyboard events are triggered, it comes with a set of properties that are accessed using JavaScript codes. Some common keyboard event properties are; event.key, event.keyCode, event.ctrlKey, event.altKey, event.shiftKey.

The event.Key property returns the value of the key that is pressed or released. for example;

document.addEventListeiner('keydown', function(event) { 
//checks the value of event.key 
	console.log('you pressed the' + event.key + 'key!');
 }); 
 //returns the key that was pressed

The event.keyCode property retunrs the numeric code for the key pressed or released.

document.addEventListener('keydown',function(event) {
 //checks the value of the key pressed down 
 	console.log('the keycode of the value pressed is ' + event.keyCode); 
 }); 
 //returns the keycode of the value pressed

The event.ctrlKey property returns a Boolean value that indicates if the control key was pressed at the time of the event.

document.getElementById("myButton").addEventListener("click",function(event) {
 	if (event.ctrlKey) { 
 		alert("you clicked the button while holding down the ctrl key.");
 		 } else {
 		 		alert("you clicked the button without holding down the ctrl key.");
 } 
});
 //this example has a button element created in the html

The event.altKey property returns a boolean value that indicates if the Alt key was pressed at the time of the event.

document.addEventListeiner('keydown',function(event) { 
if (event.altKey) { 
	console.log('The Alt key was pressed'); 
	} else { 
		console.log('The Alt key was not pressed');
		 } 
});

The event.shiftKey property returns a boolean that indictes if the shift key was pressed at the time of the event.

document.addEventListener('keydown',function(event) { 
	if (event.shiftKey) { 
		console.log ('shift key was pressed'); 
		} 
});

preventing default actions

you may want to prevent the default actions that are associated with a keyboard event. For example, to prevent the default action of the Enter key in a form submission ;

document.addEventListener(’keydown’,function(event) { 
	if (event.keyCode === 13) {
		event.preventDefault(); 
		console.log('Event key was pressed'); 
		} 
});

Conclusion

Keyboard events are an essential part of JavaScript programming, it allows developers to build more interactive and responsive web applications. By understanding the different types of keyboard events and how to handle them, developers create a more user-friendly and engaging experience for users.

javascript

beginners

elitewriter

webdesign