19 October, 2009
0 Comments
0 categories
The normal behavior of a browser is to select the address bar after pressing tab on the last element of the page or shift tab on the first element on the page. Some customer who want to port a Windows application to a Web application want to copy the exact functionality of the Windows application (this is of course not a good idea) and want the tab order to stay in the web form. The following ASP .NET page shows how to make this functionality work on a web form, using CSS and JavaScript.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Test Page</title> <style type="text/css"> .FirstElementOnPage { position: absolute; top: -120px; border: solid 1px white; height: 1px; width: 1px; } .LastElementOnPage { position: absolute; top: -100px; border: solid 1px white; height: 1px; width: 1px; } .LastColumn { border-left: solid 10px white; text-align: left; width: 100%; } </style> <script language="javascript" type="text/javascript"> var m_shiftKeyPressed = false; // This function focusses the given element. The funcion has a parameter event, // because the global event object is only defined in Internet Explorer. function SetFocusToElement(event, elementId, shiftKeyValue) { // Determine if Shift key is pressed. if (event.shiftKey) { // IE defines a global object event with a property shiftKey, use this property shiftKeyIsPressed = event.shiftKey; } else { // Google chrome and firefox don't define a global event object and the event onblur event parameter does not contain a property shiftKey. // Use the determined value for m_shiftKeyPressed in the onKeyPressedDown event handler shiftKeyIsPressed = m_shiftKeyPressed; } // Only focus when parameter shiftKeyValue == shiftKeyIsPressed if (shiftKeyIsPressed == shiftKeyValue) { // Find the element in DOM var elementToFocus = document.getElementById(elementId); // Must use setTimeout for google chrome, to set focus. var statementsToExcecute = 'document.getElementById(\'' + elementId + '\').focus()'; setTimeout(statementsToExcecute, 1); } // Must return true, for firefox to work return true; } function OnKeyUpFocusChange(event) { // Save if shift key is pressed, for use in onblur eventhandler. m_shiftKeyPressed = event.shiftKey; return true; } </script> </head> <body> <form id="mainForm" runat="server"> <input id="firstElementOnPage" type="text" class="FirstElementOnPage" /> <table> <tr> <td><asp:Label ID="customerLabel" runat="server" Text="Customer"></asp:Label></td> <td class="LastColumn"><asp:TextBox ID="customerTextBox" runat="server" Text="Microsoft" onkeydown="OnKeyUpFocusChange(event);" onblur="SetFocusToElement(event, 'submitButton', true);"></asp:TextBox></td> </tr> <tr> <td><asp:Label ID="cityLabel" runat="server" Text="City"></asp:Label></td> <td class="LastColumn"><asp:TextBox ID="cityTextBox" runat="server" Text="Redmond"></asp:TextBox></td> </tr> <tr> <td><asp:Label ID="supplierLabel" runat="server" Text="Supplier"></asp:Label></td> <td class="LastColumn"><asp:TextBox ID="supplierTextBox" runat="server" Text="IBM"></asp:TextBox></td> </tr> <tr> <td><asp:Label ID="productsLabel" runat="server" Text="Products"></asp:Label></td> <td class="LastColumn"><asp:TextBox ID="productsTextBox" runat="server" Text="Windows"></asp:TextBox></td> </tr> </table> <input id="submitButton" type="button" value="Submit" onblur="SetFocusToElement(event, 'customerTextBox', false);" /> <input id="lastElementOnPage" type="text" class="LastElementOnPage" /> </form> </body> </html>
After pressing the tab key on when the Submit button has focus, the customer textbox will be focused.
Tags: ASP .NETJavascript