Use Keyboard Shortcuts to Create Tooltips for Forms using jQuery

Posted by: Malcolm Sheridan , on 11/4/2009, in Category jQuery and ASP.NET
Views: 20320
Abstract: The following article demonstrates how to use keyboard shortcuts with jQuery to create tooltips for HTML forms.
Use Keyboard Shortcuts to Create Tooltips for Forms using jQuery
 
I’ve said this once and I’ll say it again, jQuery is cool. Something on the web that is very helpful to users when filling out HTML forms is for you, the developer, to give them help along the way. I thought it would be cool to use jQuery to show help tooltips when the user clicks on a combination of keys using their keyboard. This article will demonstrate how to capture keyboard events in JavaScript and display help tooltips. 
Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here. The jQuery Tools and can be downloaded from here
Open Visual Studio 2008 and choose File > New > Web > ASP.NET Web Application. Add the following HTML to the Default.aspx page:
 
<table>
            <tr>
                <td>
                    Given Name
                </td>
                <td>
                    <input type="text" maxlength="10" id="txtGivenName" />
                </td>
                <td>
                    <div id="givenName" style="display:none;" title="G">
                       <img src="info.png" alt="Info" width="16" height="16" />
                        Please supply your given name</div>           
                </td>
            </tr>
            <tr>
                <td>
                    Surname
                </td>
                <td>
                    <input type="text" maxlength="20" id="txtSurname" />
                </td>
                <td>
                    <div id="surname" style="display:none;" title="S">
                        <img src="info.png" alt="Info" width="16" height="16" />
                        Please supply your surname. This can only be <b>20</b> characters long</div>       
                </td>
            </tr>
        </table>  
 
The HTML above is quite simple. There’s a table which contains two text boxes. In the cell to the right of the text boxes there’s a <div> element which contains an image and some useful text if the user gets lost or in unsure of what value to put in the text box. To make a generic piece of JavaScript I’m going to use the title attribute in the <div> element. I’ll use that as the key to combine with the shift key. The next step is to add the following jQuery code to the <head> section of the page. Ideally JavaScript should go to a separate .js file, however for this example; I’ll keep it in the same page:
 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $(this).keydown(function(e) {
                var evt = e || window.event;
                if (evt.shiftKey) {                   
                    findHelp(evt).fadeIn("slow");
                }
            });
 
            $(this).keyup(function(e) {
                var evt = e || window.event;
                if (evt.shiftKey) {                   
                    findHelp(evt).hide("fast");
                }
            });
        });       
 
        function findHelp(e) {
            var key = (e.keyCode ? e.keyCode : e.charCode);
            return $("div[title=" + String.fromCharCode(key) + "]");
        } 
    </script> 
 
In the above code, I’m binding to the document’s keydown and keyup events. On the keydown event, I want to show the tooltip, and on keyup, hide it. 
$(this).keydown(function(e)
$(this).keyup(function(e)
Both pieces of code get information about the event through the argument e. Because I only want this to work when the user holds down the shift key, I’m checking for that through the evt.shiftKey variable. This indicates whether the shift key was pressed when the event fired
var evt = e || window.event;
if (evt.shiftKey)
 
From there I have created a function called findHelp. The sender of the event is passed to this function. I grab either the keyCode or charCode value, and then use that in the jQuery Selector to find the related <div> element by its title attribute:
 
function findHelp(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
      return $("div[title=" + String.fromCharCode(key) + "]");
}
 
Running this code now will display the simple form. If you hold down Shift + S or Shift + G it will show and hide the tooltip for each text box.
Before the keydown event and on the keyup event
KeyDownevent_1
During the keydown event
KeyDownevent_2

This is a nice addition for any website that wants to help their users fill out HTML forms. For more information on keyboard events you can go here for more reading. The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by pete w on Wednesday, November 4, 2009 9:38 AM
I like it! I've done something similar with the js-hotkeys plugin.
check out:
http://www.acceptedeclectic.com/2009/10/rapid-keyboard-friendly-grid-with.html
and
http://www.reallifedata.com/keyboardgrid/demo.html
Comment posted by Malcolm Sheridan on Wednesday, November 4, 2009 3:10 PM
@pete w
Glad you liked it.  I had at look at your demo's and they're nice too.  
Comment posted by Michael Guilfoyle on Thursday, November 5, 2009 9:04 AM
A very good resource… I like it

<a href=" http://www.m6.net/"> ASP.Net Hosting </A>
Comment posted by Jarrett on Sunday, November 8, 2009 6:09 PM
This is not a good example of HTML usage. You should be using label tags and fieldsets instead of tables and divs.  Otherwise, nice concept.
Comment posted by Malcolm Sheridan on Sunday, November 8, 2009 8:26 PM
@Jarrett
Apologies for not using fieldsets and labels.  I agree they're better and I will try to use them more in the future.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel