jQuery Enter to Tab

An intranet web application we've been working on involves a lot of data entry. One feature that helps when typing in a large number of small numbers is being able to use the enter key like the tab key. Instead of tabbing over to the next field on the list, you simply press enter. It's a small difference, but it's easier to reach, people are used to it from Excel, and over enough time, it makes a big difference.

The application used jQuery, and there didn't seem to be any canned solutions from that camp. We knew it had to be possible, so we did a little searching, and sure enough, found a script on "internet.com." It's rather messy, and isn't the most elegant solution, but it tells us that we simply need to capture the enter key press event, find the text box, and give it focus.

So let's go through the process of converting that basic flow to jQuery. We could have made this a jQuery extention, and probably will at some point, but in the interest of time, it's just straight jQuery code.

We start out by creating a function to run when the script is loaded, and finding all <input> boxes that have the .data-entry class (the class gave us better control over which text boxes this functionality should work with).

textboxes = $("input.data-entry");

Next, we capture the enter key (and all other keys) with the "keyDown" event. Since this is jQuery, event will be captured on all the textboxes we just found, without need a loop.

$(textboxes).keydown (checkForEnter);

Now we need to check and see if it was the enter key that was pressed, and if so, perform our tabbing functionality. We define the function "checkForEnter", accepting the "event" argument. That argument gives us the keyCode for the key that was pressed - the enter key is #13.

function checkForEnter (event) {
  if (event.keyCode == 13) {
 
  } 
}

If that statement returns true, we know the enter key was pressed, and that we need to give focus to the next textbox. We need to get at our array of textboxes from the initialization function, so we'll define the "textboxes" variable at the very top of our page, outside of any functions. Now that we have the array, let's find out where the current textbox (sent to us in "this") is in it using the "index" function.

currentBoxNumber = textboxes.index(this);

So we can find out what the next box is by simply adding one to that number. Let's make sure we're not at the end of the array first.

if (textboxes[currentBoxNumber + 1] != null) {

If that works, now we simply change the focus, and select the text inside it.

nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
nextBox.select();

Our functionality is in place. Before we're finished with the function, however, we need to stop the enter key from doing what it normally does, which is submitting the form. Normally, this is a bit of a pain to do reliably, but jQuery gives us the "preventDefault" function. Between that and returning false with our function, the form won't submit automatically.

event.preventDefault();
return false;

Note that when the user gets to the end of all the textboxes, the above code doesn't run, so the default functionality does work and the form is submitted automatically when they reach the end.

Trying it out, we found out that it only worked in Safari. Not good. We looked back to the original script and noticed browser detection in use. Apparently that _was_ important - no worry, however, jQuery has browser checking build in, and we can simply examine the $.browser property to switch between the slightly different events.

if ($.browser.mozilla) {
$(textboxes).keypress (checkForEnter);
} else {
$(textboxes).keydown (checkForEnter);
}

And that's it - now we can move from box to box using the enter key.