Friday, March 29, 2024

jQuery Basics for Web Developers: Keyboard Events

In the last article we discussed jQuery mouse events; in this article we will discuss how to bind keyboard events to HTML elements using jQuery.

The jQuery keyboard events can be bound to any HTML element, but only the element that has focus will fire the event. Most of the time keyboard events will be bound to form elements (HTML input elements).

.keypress()

The keypress event fires as soon as a key is pressed. When modifier keys are pressed (shift, ctrl, alt, etc.), the event will not fire. The modifier keys cause a keydown event, but not a keypress event. In the example code below, a keypress event is attached to the input element. When a key is pressed, the event fires to display an alert box. If you press a modifier key, you will notice the event does not fire.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#keypress").keypress(function () {
						alert("pressed");
					});
				});
			</script>
		</head>
		<body>
			<p>Key Press Test: <input type="text" name="keypress" id="keypress" /></p>
		</body>
	</html>
		

.keydown()

The keydown event fires as soon as the key is pressed down. This behavior is similar to the keypress event, but it also registers modifier keys. In the example code below, a keydown event is attached to the input element. When the key is pressed, the event fires to display an alert box. You can press a modifier key (shift, ctrl, alt, etc.) to get the event to fire also.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#keypress").keydown(function () {
						alert("pressed");
					});
				});
			</script>
		</head>
		<body>
			<p>Key Down Test: <input type="text" name="keypress" id="keypress" /></p>
		</body>
	</html>
		

.keyup()

The keyup event fires when the key is pressed down and then released. It will not fire until the key is released. The difference between this one and the others (keypress and keydown) is that when a key is held down, this event will not fire until the key is released. The other keyboard events continue to fire as long as the key is held down. In the example below, a keyup event is attached to the input element. When the key is pressed and then released, the event fires to display an alert box. You can hold a key down and the event will not fire until the key is released. Modifier keys also work with this example.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#keypress").keyup(function () {
						alert("pressed");
					});
				});
			</script>
		</head>
		<body>
			<p>Key Up Test: <input type="text" name="keypress" id="keypress" /></p>
		</body>
	</html>
		

Testing for Certain Key

What if you want to only fire the event when a certain key is pressed? You can find this out by using an event object that is passed to the event handler. Different browsers store this information differently, but jQuery uses the .which attribute to make it consistent between browsers. In the example code below, a keyup event is bound to an input object. When the key is pressed and released, an alert box is displayed. The alert box shows the key code of the key that is pressed. You will notice that there is now an event object called "key" being passed in. We did not do this on any of the other code examples above.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#keypress").keyup(function (key) {
						alert(key.which);
					});
				});
			</script>
		</head>
		<body>
			<p>Key Up Test: <input type="text" name="keypress" id="keypress" /></p>
		</body>
	</html>
		

Conclusion

As you can see from this, you can bind key press events to HTML elements. Using this you will be able to check for certain key presses and intercept those to perform specific tasks. You could even use this to ignore certain key presses. The possibilities are endless!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured