Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    70
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Caps Turned On/Off

    Hey,

    I have started working with Java Script now with the JQuery Library.

    Anyway,

    I have created if A user presses caps lock it will output caps lock has been turned on now I can I output if the user hits caps lock again they get A different message or the message disappears?

    I also want the functionality to work only once I have clicked the text field.


    Here is the HTML

    PHP Code:


    <html>
    <
    head>
    <
    title>jQuery Keycode Examples for Enter button and Escape Button</title>
    <
    script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jfunc.js"></script>
    </head>
     
    <body>
     
    <input type='text' name='nothing' placeholder='Enter Something'><br>
    <div id='caps'></div>
     

     
    </body>
    </html> 



    Heres the Java Script/JQuery
    PHP Code:



    $(document).keyup(function(e) {
     
        
    //Enter
        
    if (e.keyCode == 20)
        {
            $(
    '#caps').html('Caps Lock Is Turned On');

        }
       
        
    //Escape
        
    if (e.keyCode == 27)
        {

        
        
    alert('s');



        }
     
    }); 
    Thanks,

    Spudster

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your code indicates that the caps lock key was pressed and nothing else.

    You can of course detect if a user is typing uppercase, but to test a toggling of the capslock state, there is an event object method supported on Firefox and IE. Opera has the method but doesn't seem to support capslock, Chrome has no support as yet.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    
    </head>
    
    <body>
    
    <span id='capsWarn'></span>
    
    <script type="text/javascript">
    
    (function(/*2843294C6F67696320416C69*/)
    {
      var f = ( function( elemID )
      {
        var support = false;
        
        return function( e )
        {
          var evt = e || window.event,
              theKey = evt.keyCode || evt.key || evt.which ;
           
          if( theKey == 20 && evt.getModifierState )
          {
            if( !support && evt.getModifierState( "CapsLock") )
              support = true; /* check function can return true */
           
            if( support )
             document.getElementById( elemID ).innerHTML = 'Caps Lock has been turned ' + ( evt.getModifierState( "CapsLock" ) ? "ON" : "OFF" );
          }
        }    
      })( 'capsWarn' ); /* Specify ID of output element */
    
      document.addEventListener ? addEventListener( 'keyup', f, false ) : document.attachEvent( 'onkeyup', f );
        
    })();
    
    </script>
    </body>
    </html>

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    what is "2843294C6F67696320416C69" for?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Try this - not sure if it works in all browsers, but it does work in IE9 and Chrome.

    Code:
    <input type="text" name="txtbox1" onkeypress="capLock(event)" />
    <div id="message" style="visibility:hidden; color:red">Caps Lock is on.</div> 
    
    <script type = "text/javascript">
    
    function capLock(e) {
    kc = e.keyCode?e.keyCode:e.which;
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)) {
    document.getElementById('message').style.visibility = 'visible';
    }
    else {
    document.getElementById('message').style.visibility = 'hidden';
    }
    }
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by rnd me View Post
    what is "2843294C6F67696320416C69" for?
    Provenance.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    70
    Thanks
    5
    Thanked 0 Times in 0 Posts
    None of those seem to work.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Spudster View Post
    None of those seem to work.
    Test Here

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Spudster View Post
    None of those seem to work.
    It works for me! The fault, dear Brutus, lies not in the stars ...

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Actually, at least Logic Ali's solution doesn't work for me on Firefox. It detects whether the button was pressed, but not whether caps lock is turned on or off (I could have it on before opening that page).

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Airblader View Post
    Actually, at least Logic Ali's solution doesn't work for me on Firefox. It detects whether the button was pressed, but not whether caps lock is turned on or off (I could have it on before opening that page).
    It could easily do that, but it has to check for full support for getModifierState first, which means waiting for an off-to-on transition. Otherwise Opera would give an incorrect response.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •