|
Use Keyboard Shortcuts to Create Tooltips for Forms using jQuery
|
|
Rating: 6 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 11/4/2009,
in category "jQuery and ASP.NET"
Views: this article has been read 10041 times
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
During the keydown event
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