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

Caps Lock Is On tooltip

9 Answers 320 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
jo
Top achievements
Rank 1
jo asked on 08 Jul 2008, 02:08 PM
I just  want to do a caps lock is on tooltip before hitting any key and on key press.

9 Answers, 1 is accepted

Sort by
0
Accepted
Kevin Babcock
Top achievements
Rank 1
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
0
jo
Top achievements
Rank 1
answered on 21 Jul 2008, 06:07 PM
Thanks! it works for me..
0
KlaatuMcGoo
Top achievements
Rank 1
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.
0
Kevin Babcock
Top achievements
Rank 1
answered on 21 Jan 2009, 01:03 PM
Hello KlaatuMcGoo,

Would you mind posting the source code or markup with which you are having difficulty? Hopefully I will be able to help you track down the source of your issues.

Regards,
Kevin Babcock
0
KlaatuMcGoo
Top achievements
Rank 1
answered on 13 Feb 2009, 04:45 PM
Sorry for the delay, I got on to more urgent things.  I actually tried your solution w/a fresh asp.net web site project and it worked.  The problem I am having seems to be related to something goofy happening when I convert my login control to a template, but this is not related to your solution and just not a high priority for me right now.  So there doesn't seem to have been a problem in the first place, Thanks.
0
Steve
Top achievements
Rank 1
answered on 05 Mar 2012, 09:31 PM
Kevin,

I changed your code slightly. The CapsLock message was showing every time I tabbed into the textbox so I removed the ShowEvent="OnFocus" from the RadToolTip section.  Now it only shows when the Capslock is on.  Is there any issue if I do this?

Steve

39  <telerik:RadToolTip ID="RadToolTip1" runat="server"
40  Text="Caps Lock is on!"
41  TargetControlID="TextBox1"
42  Position="BottomCenter"
43  RelativeTo="Element"/>
0
Pradeep
Top achievements
Rank 1
answered on 27 Dec 2012, 11:28 AM
   The name 'radtooltip' does not exist in the current context  

i'm getting this error why so...? No changes i've made in your code..,

0
Steve
Top achievements
Rank 1
answered on 27 Dec 2012, 02:58 PM

Pradeep,

First it Kevin's code not mine so the credit should be his. :)  It would be my first guess that you are missing a project reference for the Telerik tooltip control.  Try that and see if that fixes it.

Steve

0
Mehmet
Top achievements
Rank 1
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"/> 
Tags
ToolTip
Asked by
jo
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
jo
Top achievements
Rank 1
KlaatuMcGoo
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Pradeep
Top achievements
Rank 1
Mehmet
Top achievements
Rank 1
Share this question
or