This is a migrated thread and some comments may be shown as answers.

Caps Lock Is On tooltip

9 Answers 238 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

Accepted

answered on 12 Jul 2008, 05:53 AM

Hello Jo,

Unfortunately, it is not possible to detect the Caps Lock key directly. However, there are many workaround scripts available online which show a way to detect whether Caps Lock is on while the user is typing. I have created a simple form for you to demonstrate how to use this functionality in your project.

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript">              
        
                            function AlertIfCapsLockOn(eventArgs) { 
        
                                var keyCode = eventArgs.keyCode ? eventArgs.keyCode : eventArgs.which; 
        
                                var shiftKey = eventArgs.shiftKey ? eventArgs.shiftKey : ((keyCode == 16) ? true : false) 
        
                                var isEnabled = CapsLockEnabled(keyCode, shiftKey); 
        
                                if(isEnabled) { 
        
                                    var toolTip = $find('<%= RadToolTip1.ClientID %>'); 
        
                                    toolTip.show(); 
        
                                } 
        
                            } 
        
                            function CapsLockEnabled(keyCode, shiftKey) { 
        
                                if(((keyCode >= 65 && keyCode <= 90) && !shiftKey) || ((keyCode >= 97 && keyCode <= 122) && shiftKey)) 
        
                                    return true; 
        
                                else 
        
                                    return false; 
        
                            } 
        
                        </script>        
        
                    </telerik:RadScriptBlock> 
        
                    <asp:TextBox ID="TextBox1" runat="server" onkeypress="AlertIfCapsLockOn(event)" />           
        
                    <telerik:RadToolTip ID="RadToolTip1" runat="server" 
        
                        Text="Caps Lock is on!" 
        
                        ShowEvent="OnFocus" 
        
                        TargetControlID="TextBox1" 
        
                        Position="BottomCenter" 
        
                        RelativeTo="Element"/> 
        
                </form> 
        
            </body> 
        
            </html>

I hope this helps. Please let me know if you continue to have questions.

Regards,
Kevin Babcock

answered on 21 Jan 2009, 12:29 AM

Kevin,
Your code sample works pretty well, but not when I try to use it in a different context. I want to use it w/the ASP.NET 2.0 login control. So I did the "Convert to Template" from the login control's smart tag, then tried to apply your technique with the password textbox. I got some wierdo errors, try it out and you'll see. I ended up throwing an alert() into the javascript to prove to myself it's correctly doing the CAPS LOCK sensing (it is), but if I take steps to make the build errors go away, the tooltip never displays.
I was going to use Scott Mitchell's approach (Warning the User when Caps Lock is On) when I saw your post and I'd much rather use a rad tooltip than an ugly popup.

answered on 09 Dec 2014, 05:19 PM

Thanks to Kevin for the code. While searching online, I came across with a couple codes including this one. And at the end, I've merged this code with one of the other codes and the new code is below.

The improvements:
* The code is simpler
* It doesn't show the tooltip on each focus. This was confusing users. (Changed RadToolTip's ShowEvent="OnFocus" to ShowEvent="FromCode" )
* It hides the tooltip when caps lock is turned off and user starts typing again.

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function AlertIfCapsLockOn(e) {
var s = String.fromCharCode(e.which);
var toolTip = $find('<%= RadToolTip1.ClientID %>');
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
toolTip.show();
}
else
{
toolTip.hide();
}
}
</script>
</telerik:RadScriptBlock>
<asp:TextBox ID="TextBox1" runat="server" onkeypress="AlertIfCapsLockOn(event)" />
<telerik:RadToolTip ID="RadToolTip1" runat="server" Text="Caps Lock is on!" ShowEvent="FromCode"
TargetControlID="TextBox1" Position="BottomCenter" RelativeTo="Element"/>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Caps Lock Is On tooltip

9 Answers, 1 is accepted