JQUERY - KEYBOARD EVENTS

As the name suggests, the Keyboard Events are executed when we type something using the keyboard.

Let us see the important keyboard events provided by JQuery.

Keydown Event

The keydown() Event gets executed, when a key (Any key in the keyboard) is pressed.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text">

		<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>

		<script>

			$('input').keydown( function() {
				$(this).css("background-color", "yellow")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have an <input> element, that accepts a text.

<input type = "text">

Now, if we take a look at the JQuery statement,

$('input').keydown( function() {
	$(this).css("background-color", "yellow")
});

At first we locate the <input> element,

$('input')

Then we use the keydown() event,

$('input').keydown(...)

And put the function inside keydown() event to change the color of <input> element.

$('input').keydown( function() {
	$(this).css("background-color", "yellow")
});

And the function,

function() {
	$(this).css("background-color", "yellow")
});

Locates the current element (i.e. <input>) using this and changes the color of the <input> element.

Note : In simple words, the moment we start typing something using the keyboard, 'keydown()' event is executed.

Keyup Event

The keyup() Event gets executed, when a key (Any key in the keyboard) is released after it is pressed.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text"> 		

		  <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  
		  <script>
  
			$('input').keyup( function() { 
				$(this).css("background-color", "red")
			});
		
		  </script>    
	</body>
</html>

Output :

So, if you look at the above code, we have an <input> element, that accepts a text.

<input type = "text">

Now, if we take a look at the JQuery statement,

$('input').keyup( function() { 
		$(this).css("background-color", "red")
	});

At first we locate the <input> element,

$('input')

Then we use the keyup() event,

$('input').keyup(...)

And put the function inside keyup() event to change the color of <input> element.

$('input').keyup( function() { 
		$(this).css("background-color", "red")
	});

And the function,

function() { 
		$(this).css("background-color", "red")
	});

Locates the current element (i.e. <input>) using this and changes the color of the <input> element.

Note : In simple words, the moment we start typing something using the keyboard, and the key is released keyup() event is executed.

Keypress Event

The keypress() Event gets executed, when a key (Any key in the keyboard) is pressed. It is quite similar to keydown() event. The difference is, keypress() Event the ctrl, alt, ctrl, backspace, shift, esc e.t.c. keys are ignored.

Example :
```
<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text">  

		  <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  
		  <script>
  
			$('input').keypress( function() { 
				$(this).css("background-color", "blue")
			});
		
		  </script>    
	</body>
</html>
```
Output :

So, if you look at the above code, we have an <input> element, that accepts a text.
```
<input type = "text"> 
```
Now, if we take a look at the JQuery statement,
```
$('input').keypress( function() { 
	$(this).css("background-color", "blue")
});
```
At first we locate the <input> element,
```
$('input')
```
Then we use the keypress() event,
```
$('input').keypress(...)
```
And put the function inside keypress() event to change the color of <input> element.
```
$('input').keypress( function() { 
	$(this).css("background-color", "blue")
});
```
And the function,
```
function() { 
	$(this).css("background-color", "blue")
});	
```
Locates the current element (i.e. <input>) using this and changes the color of the <input> element.

Just note that if you press the keys like ctrl, alt, ctrl, backspace, shift, esc, the keypress() event won't get triggered. Only when we type any other key, the color of <input> element gets changed.

Combining Keyup and Keydown Event

Let us see the Keyup and Keydown Event more clearly after combining them.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text">  

		  <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  
		  <script>
  
			$('input').keyup( function() { 
				$(this).css("background-color", "red")
			});
			
			$('input').keydown( function() { 
				$(this).css("background-color", "yellow")
			});
		
		  </script>    
	</body>
</html>

Output :

So, if you look at the above code, we have an <input> element, that accepts a text.

<input type = "text">

Now, if we take a look at the first JQuery statement(i.e. The keydown() event),

$('input').keydown( function() { 
	$(this).css("background-color", "yellow")
});

We can see that when a key is pressed, the color of the <input> element changes to yellow.

And the moment the key is released, the second JQuery statement gets executed (i.e. The keyup() event).

$('input').keyup( function() { 
	$(this).css("background-color", "red")
});

And the color of the <input> element changes to red from yellow.

❮❮ PREV NEXT ❯❯

JQUERY - KEYBOARD EVENTS

Keydown Event

Example :

Output :

Keyup Event

Example :

Output :

Keypress Event

Example :

Output :

Combining Keyup and Keydown Event

Example :

Output :