Introduction
I recently got a couple of defect tickets about users whose edit forms would randomly "go blank" when they were entering data. As it happens, when a user would hit backspace while a dropdown had the focus, the browser interoperated it as a Back button action.
This is a simple way to prevent users from accidentally browsing backwards when hitting the backspace key in a SELECT
element.
Using the code
This very simple form in HTML has a textbox and a dropdown:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Backspacing in a dropdown</title>
</head>
<body>
<form>
Backspacing here doesn't do anything:
<input type="text" /><br />
Backspacing here acts as a Back button:
<select>
</select>
</form>
</body>
</html>
Browse to a site (such as http://www.codeproject.com), then browse to your sample form. Click on the textbox. You can sit on the backspace key as long as you like, and nothing will happen. But, when you focus on the dropdown and hit backspace, you'll find yourself looking at the previous page.
With some help from jQuery, we can solve this with a few simple lines of JavaScript!
First, we need to make sure the page references the jQuery library. Either download the jQuery library from the jQuery site at http://docs.jquery.com/Downloading_jQuery, or reference it directly from their site (which is what we will do).
We'll reference the library in our HTML page by adding this to our <head>
section:
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
Now, our page is plugged in to the awesome power of jQuery! We are going to focus on three of jQuery's features: document.ready
, selectors, and event handlers.
We know we only want to change how the dropdowns handle the backspace, so we will use this selector:
$('select') ...
This tells jQuery that we are trying to do something to every <SELECT>
tag on the page. What are we trying to do? Well, we need to handle some key events.
$('select').keypress(function(event) { ... });
$('select').keydown(function(event) { ... });
We're adding an event handler on all of our <SELECT>
tags for both the keypress
and keydown
events. To handle those pesky backspaces, all we need to do is cancel the event if the keyCode
value in the event indicates it's a backspace, which has a value of 8.
if (event.keyCode == 8) {
return false;
}
I like to wrap that in a function so we can use it anywhere without having to repeat our code. Let's create a function that looks like this:
function cancelBackspace(event) {
if (event.keyCode == 8) {
return false;
}
}
Now, we know that our function takes an event argument, checks the keyCode
value for a backspace, and returns false
if it matches. Let's put the pieces together by calling the function from the .keypress()
and .keydown()
functions.
$('select').keypress(function(event) { return cancelBackspace(event) });
$('select').keydown(function(event) { return cancelBackspace(event) });
The only thing left is to run this code when the document is fully loaded. jQuery handles that for us beautifully with $(document).ready()
. We can include multiple ready()
blocks and they will execute once the DOM is loaded.
$(document).ready(function() {
$('select').keypress(function(event) { return cancelBackspace(event) });
$('select').keydown(function(event) { return cancelBackspace(event) });
});
Now, let's see the entire page!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Backspacing in a dropdown</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
Backspacing here doesn't do anything:
<input type="text" /><br />
Backspacing here acts as a Back button:
<select>
</select>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('select').keypress(function(event)
{ return cancelBackspace(event) });
$('select').keydown(function(event)
{ return cancelBackspace(event) });
});
function cancelBackspace(event) {
if (event.keyCode == 8) {
return false;
}
}
</script>
</body>
</html>
The textbox is unaffected and behaves normally. But, you'll find that when you select a dropdown and hit backspace, nothing happens! No back button behavior...
Nice and safe, and we won't have any more users complaining about random form disappearance!
Points of interest
Remember that Internet Explorer needs a keydown event to handle a backspace, and Safari and Firefox need a keypress event. There is no harm in attaching both of them.
History
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.