Warning the User when Caps Lock is OnBy Scott Mitchell
Most security systems' passwords are case-sensitive. Case sensitivity nearly doubles the number of possible characters that can appear in the password, which makes it harder for nefarious users trying to break into the system. As a result, if a user logging into the system has Caps Lock turned on, they'll enter letters in the opposite case and not be able to login. Because the textboxes that collect user input typically are masked to prevent an onlooker from seeing a user's password, the user typing in her password may not realize that Caps Lock is on. To help prevent this type of user error, many login screens for desktop-based applications display some sort of warning if the user's Caps Lock is on when they start typing in their password.
An Overview of the WarnWhenCapsLockIsOn Control's Functionality
The WarnWhenCapsLockIsOn control is designed to display a page developer-specified message if a user types in a specified TextBox control with Caps Lock on. The control extends the Label class so it has the same set of properties as the Label control:
CssClass, and so on. Use these properties to configure the message and the message's appearance.
In addition to the Label control's properties, the WarnWhenCapsLockIsOn control also has a
TextBoxControlId property, which you must
set to the
ID of a TextBox control. This property is required. (To provide a Caps Lock warning for multiple TextBox controls on
the page, add a WarnWhenCapsLockIsOn control for each TextBox.) If the user starts typing in the specified textbox with the Caps Lock on,
the WarnWhenCapsLockIsOn control is displayed. The WarnWhenCapsLockIsOn control is hidden again when one of the following conditions apply:
- The user types in the same textbox with Caps Lock off.
- The WarnWhenCapsLockIsOn control has been displayed for
WarningDisplayTimeproperty defaults to a value of 2500, meaning that the control will be displayed for 2.5 seconds after the last character with Caps Lock on has been typed. You can lengthen or shorten this property value as needed. A value of 0 displays the warning until the user types in a character without Caps Lock on or after there's a postback.
Textproperty (and, perhaps, other formatting properties), and indicate the TextBox to "watch" via the control's
TextBoxControlIdproperty. That's all there is to it! We'll discuss how to add the WarnWhenCapsLockIsOn control to your ASP.NET website project and look at an end-to-end example in the "Using the WarnWhenCapsLockIsOn Control in an ASP.NET Web Page" section later on in this article.
Initially Hiding the WarnWhenCapsLockIsOn Control
Whenever the ASP.NET page is loaded in the user's browser, the WarnWhenCapsLockIsOn control needs to be hidden so that it does not appear. The WarnWhenCapsLockIsOn control should only appear when the user starts typing in the specified textbox with Caps Lock on. To initially hide the WarnWhenCapsLockIsOn control, I overrided the control's
AddAttributesToRendermethod and added code that set the
displaystyle attributes to "hidden" and "none", respectively.
The effects of these style attribute settings are evinced by the markup sent to the browser. Because the WarnWhenCapsLockIsOn control extends the
Label class, it renders as a
<span> element with the value of its
Text property rendered as the
inner content, just like the Label control. In the
style attribute you can see that the
settings have been configured to hide the control:
display settings to "visible" and "inline" whenever the user
types into the corresponding textbox with Caps Lock on.
onkeypressevent like so:
object, which includes information such as what key was pressed and whether or not the Shift key was depressed, among other useful tidbits.
In short, we need to add an
onkeypress client-side event handler to the TextBox control referenced by the WarnWhenCapsLockIsOn control's
TextBoxControlId property. The event handler called must determine whether Caps Lock is on or off and show or hide the WarnWhenCapsLockIsOn control
To add client-side event handlers to a server-side Web control use the
Attributes collection like so:
The above code adds the markup
attribute="value" to the Web control's rendered output. Usually this sort of logic is
applied during the PreRender stage of the page lifecycle. Therefore, to implement this functionality I overrode the
in the WarnWhenCapsLockIsOn class (which is fired during the PreRender stage) and added the following code:
GetTextBoxControl method (not shown in this article) returns a reference to the TextBox control specified by the
TextBoxControlId property. This referenced TextBox has its
Attributes collection updated to include an
skm_CheckCapsLock function (which we'll examine shortly),
is passed three input parameters:
event- information about the
keypressevent, including what key was pressed and whether the Shift key was depressed.
- The value of the WarnWhenCapsLockIsOn's
ClientIDproperty - we need to supply the client-side
idof the WarnWhenCapsLockIsOn control so that it can be displayed or hidden, depending on whether the user has Caps Lock on.
WarningDisplayTime- the number of milliseconds to display the Caps Lock warning; defaults to 2500 milliseconds (2.5 seconds).
skmControls2.js. This file is compiled as an embedded resource in the assembly and is loaded into the ASP.NET page on which the TextBoxCounter or WarnWhenCapsLockIsOn controls are used via a call to the
GetWebResourceUrlmethod. For more information on this technique see: Accessing Embedded Resources through a URL using
skm_CheckCapsLock function (and ancillary helper functions)
there. It is injected into the ASP.NET page in the
OnPreRender method (see step 1 in the comments in
Determining Whether Caps Lock is On
keypressevent is raised in client-side script, the
eventobject contains information as to what key was pressed and whether the Shift key was depressed (along with whether Alt and Ctrl were depressed). It does not, however, indicate whether Caps Lock was on. The good news is that with a bit of code we can determine whether Caps Lock is on. If the user has entered a capital letter and the Shift key is not depressed, then Caps Lock must be on; likewise, if the user enters a lowercase letter and the Shift key is depressed, then Caps Lock is on.
skm_CheckCapsLock function determines whether Caps Lock is on and, if so, calls the
which displays the WarnWhenCapsLockIsOn control for a specified interval. If Caps Lock is not on then the
function is called, which hides the WarnWhenCapsLockIsOn control. The
skm_CheckCapsLock function uses a modified version of a script
The keen reader will note that this check doesn't really identify when Caps Lock is on or off. Rather, it identifies if Caps Lock is on or off when typing in
an alphabetic character. If the user types in the number "9" or presses the left arrow, the first conditional statement will evaluate
false. In other words, the
skm_HideCapsWarning functions are only called when the
user enters an alphabetic character.
skm_HideCapsWarning functions are not shown in this article; you'll have to download the source code to inspect them.
They're both fairly straightforward: both reference the WarnWhenCapsLockIsOn control and then set the
properties to show or hide the warning message. The only trickiness deals with the code that displays the warning for at most a specified number of milliseconds
Using the WarnWhenCapsLockIsOn Control in an ASP.NET Web Page
The download available at the end of this article includes the complete source code for the WarnWhenCapsLockIsOn controls, as well as a demo ASP.NET website. To use the
skmControls2controls in an ASP.NET website, copy the DLL to the website's
/Bindirectory and then add the following
@Registerdirective to the tops of the
.aspxpages where you want to use the controls:
(Alternatively, you can add this
@Register directive in the
Web.config file so that you do not need to add it to every
ASP.NET page that uses the controls. See Tip/Trick:
How to Register User Controls and Custom Controls in
The demo included in the download has an ASP.NET page that shows using the WarnWhenCapsLockIsOn control in two scenarios: on a stand-alone TextBox and on the Password TextBox in the Login control. Let's look at the stand-alone TextBox example first:
The declarative markup above shows three controls: a TextBox (
YourName); a WarnWhenCapsLockIsOn control; and a Button Web control.
The WarnWhenCapsLockIsOn control is configured to display the message "Warning: Caps Lock is on" when the user types
YourName textbox with Caps Lock on. It uses the CSS class
for its styling, which I've defined on the page; the class specifies a light yellow background, padding, centered text, and a red border. The warning
message is displayed for (at most) five seconds.
The following screen shot shows the demo page in action. Note that when Caps Lock is on and an alphabetic character is typed, the warning is displayed. This warning immediately disappears when Caps Lock is turned off and another alphabetic character is typed, or after five seconds, whatever comes first.
This demo also shows how to apply the WarnWhenCapsLockIsOn control to the Password TextBox of a Login control. Start by adding a Login control to the page
and then, from the Designer, select the "Convert to Template" from its smart tag. This will convert the Login control into a template, at which point you
can add the WarnWhenCapsLockIsOn control in the Login user interface as needed, referencing the Password TextBox (whose
ID property is
"Password"). Be sure to put the WarnWhenCapsLockIsOn control within the Login control's template so that it can "see" the Password TextBox.