❮❮ PREV

EVENTS - keypress()

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.

❮❮ PREV