Caps Lock Is On tooltip

10 posts, 1 answers
  1. jo
    jo avatar
    27 posts
    Member since:
    Jul 2008

    Posted 08 Jul 2008 Link to this post

    I just  want to do a caps lock is on tooltip before hitting any key and on key press.
  2. Answer
    Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 12 Jul 2008 Link to this post

    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.

    1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    14      
    15         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    16             <script type="text/javascript">              
    17                 function AlertIfCapsLockOn(eventArgs) { 
    18                     var keyCode = eventArgs.keyCode ? eventArgs.keyCode : eventArgs.which; 
    19                     var shiftKey = eventArgs.shiftKey ? eventArgs.shiftKey : ((keyCode == 16) ? true : false) 
    20                     var isEnabled = CapsLockEnabled(keyCode, shiftKey); 
    21                     if(isEnabled) { 
    22                         var toolTip = $find('<%= RadToolTip1.ClientID %>'); 
    23                         toolTip.show(); 
    24                     } 
    25                 } 
    26                  
    27                 function CapsLockEnabled(keyCode, shiftKey) { 
    28                     if(((keyCode >= 65 && keyCode <= 90) && !shiftKey) || ((keyCode >= 97 && keyCode <= 122) && shiftKey)) 
    29                         return true; 
    30                     else 
    31                         return false; 
    32                      
    33                 } 
    34             </script>        
    35         </telerik:RadScriptBlock> 
    36      
    37         <asp:TextBox ID="TextBox1" runat="server" onkeypress="AlertIfCapsLockOn(event)" />           
    38              
    39         <telerik:RadToolTip ID="RadToolTip1" runat="server" 
    40             Text="Caps Lock is on!" 
    41             ShowEvent="OnFocus" 
    42             TargetControlID="TextBox1" 
    43             Position="BottomCenter" 
    44             RelativeTo="Element"/> 
    45                  
    46     </form> 
    47 </body> 
    48 </html> 
    49  


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

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jo
    jo avatar
    27 posts
    Member since:
    Jul 2008

    Posted 21 Jul 2008 Link to this post

    Thanks! it works for me..
  5. KlaatuMcGoo
    KlaatuMcGoo avatar
    11 posts
    Member since:
    Apr 2007

    Posted 20 Jan 2009 Link to this post

    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.
  6. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 21 Jan 2009 Link to this post

    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
  7. KlaatuMcGoo
    KlaatuMcGoo avatar
    11 posts
    Member since:
    Apr 2007

    Posted 13 Feb 2009 Link to this post

    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.
  8. Steve
    Steve avatar
    5 posts
    Member since:
    Mar 2012

    Posted 05 Mar 2012 Link to this post

    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"/>
  9. Pradeep
    Pradeep avatar
    4 posts
    Member since:
    Jul 2012

    Posted 27 Dec 2012 Link to this post

       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..,

  10. Steve
    Steve avatar
    5 posts
    Member since:
    Mar 2012

    Posted 27 Dec 2012 Link to this post

    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

  11. Mehmet
    Mehmet avatar
    7 posts
    Member since:
    Jun 2009

    Posted 09 Dec 2014 in reply to Kevin Babcock Link to this post

    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"/> 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017