Databases Reference
In-Depth Information
},
restoreValue: function($affectedElement) {
$s($affectedElement.attr('id'), $affectedElement.data('value-saved'));
}
});
})(apex.jQuery);
Developing an Item Plug-in
In this tutorial you will create a password item plug-in with Caps Lock detection. You may be familiar
with Caps Lock detection from logging into your computer. If the password field obtains focus while the
keyboard's Caps Lock is enabled, a message appears letting you know (see Figure 11-29). The message
displayed is unobtrusive and you are not prevented from typing.
Figure 11-29.
Caps Lock message for passwords fields in Windows
This is the same type of functionality that will be added to the plug-in. Unfortunately, it is not
possible to directly detect whether or not Caps Lock is enabled from JavaScript. However, it is possible to
detect if the Shift key is depressed while another key is pressed. Using that fact, you can deduce that if a
character is entered in uppercase while the Shift key was not held down, then Caps Lock must be
enabled.
The “shift key workaround” is the basis for nearly every Caps Lock detection algorithm written in
JavaScript. The only drawback is that a user must type at least one character for the detection to work.
The detection algorithm used in this tutorial was provided by Joe Liversedge via StackOverflow. It was
chosen because it was based on jQuery and took into account some internationalization issues that
plagued some of the other solutions.
With the Caps Lock detection algorithm in hand there's only one other major hurdle: displaying the
message. Luckily, jQuery UI provides some excellent tools that make this very easy. This tutorial will use
the Position utility to place the message in the correct location on the page. Additionally, the jQuery UI
CSS Framework will be used to style the message.
The plug-in will need to include attributes that allow plug-in users to customize various parts of the
message displayed, such as its text, colors, size, and position on the page. Having the ability to control
the position on the page will allow plug-in users to prevent the warning message from covering other
important items.
