jQuery: Display the keyboard key which was pressed in a textbox

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Events : Exercise-16 with Solution

Display the keyboard key which was pressed in a textbox.

Sample Data :

<body>Input your name:  <input type="text">
<div></div>
</body>

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Display the  keyboard key which was pressed in a textbox</title>
</head>
<body>
Input your name:  <input type="text">
<div></div>
</body>
</html>

JavaScript Code:

$( "input" ).on( "keydown", function(event) {
  $( "div" ).html( event.type + ": " +  event.which );
});

Live Demo:

See the Pen jquery-events-exercise-16 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Display the event type on clicking all h1 elements.
Next: Attach a function to the focus event. The focus event occurs (display a message regarding the text field) when the <input> field gets focus.