Tip: Support tab navigation

Friday, March 07, 2008 at 8:54 AM

Posted by Bijoy Thangaraj, Google Desktop Developer

People are so used to tab navigation that they expect it in all applications, even in Google Desktop gadgets. Fortunately, implementing it in a Desktop gadget is a very easy task. You just handle a single onkeypress event for the control, as shown below.

function OnKeyPress(control_to_be_focused) {
  if (event.keyCode == 9) {
    control_to_be_focused.focus();
    event.returnValue = false;
  }
}

Here's how the code works. The control that should get the focus is passed as an argument to the OnKeyPress function. When the tab key is pressed, event.keyCode contains 9, which is the ASCII code for tab. The code inside the if statement reacts to the tab by moving focus to the next control. It also cancels the default handling of the tab key (which would insert a tab character) by setting event.returnValue to false.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com. To see all tips, choose the Tips label.