0

I have a large form and a JS to display a hidden DIV with a warning graphic if the user starts inputting with CAPS LOCK enabled. I have the DIV positioned to appear within the form text field. What I need, though, is to repeat this function in several separate fields, each field calling on a different class so that the warning graphic only appears in the specific field in which the user is currently typing. I'll post the JS followed by the CSS.

<script type="text/javascript">
    var existing = window.onload;
    window.onload = function()
    { 
        if(typeof(existing) == "function")
        {
              existing();
        }
        loadCapsChecker();
    }

    function loadCapsChecker()
    {   
        capsClass = "capLocksCheck";
        capsNotice = "capsLockNotice";

        var inputs = document.getElementsByTagName('INPUT');
        var elements = new Array();
        for(var i=0; i<inputs.length; i++)
        {
            if(inputs[i].className.indexOf(capsClass) != -1)
            {
                elements[elements.length] = inputs[i];
            }
        }   
        for(var i=0; i<elements.length; i++)
        {
            if(document.addEventListener)
            {
                elements[i].addEventListener("keypress",checkCaps,"false");
            }
            else
            {
                elements[i].attachEvent("onkeypress",checkCaps);
            }
        }   
    }

    function checkCaps(e)
    {
        var pushed = (e.charCode) ? e.charCode : e.keyCode;
        var shifted = false;        
        if(e.shiftKey)
        {
            shifted = e.shiftKey;
        }
        else if (e.modifiers)
        {
            shifted = !!(e.modifiers & 4);
        }           
        var upper = (pushed >= 65 && pushed <= 90);
        var lower = (pushed >= 97 && pushed <= 122);
        if((upper && !shifted) || (lower && shifted))
        {
            if(document.getElementById(capsNotice))
            {
                document.getElementById(capsNotice).style.display = 'block';
            }
            else
            {
                alert("Please disable Caps Lock.");
            }
        }
        else if((lower && !shifted) || (upper && shifted))
        {
            if(document.getElementById(capsNotice))
            {
                document.getElementById(capsNotice).style.display = 'none';
            }
        }
    }
</script>

And the CSS:

#capsLockNotice {
    position: relative;
    display: none;
}

#capsLockNotice img {
    position: absolute;
    right: 5px;
    top: -28px;
}

Then I put a "capLocksCheck" class on the input field, followed by this HTML:

<div id="capsLockNotice">
            <img src="/images/capslock-notice.png" title="Please disable Caps Lock." alt="Please disable Caps Lock." />
        </div>

What I need to do is have each of several specific form fields to call on its own unique Div Class so the warning graphic only appears in the specific field in which the user is currently typing. How can I modify the JS to allow different fields to call on different classes? I tried copying and pasting the entire code a second time, and changed

capsClass = "capLocksCheck";
capsNotice = "capsLockNotice";

to 

capsClass = "capLocksCheck2";
capsNotice = "capsLockNotice2";

but obviously that didn't work. It just disabled the function entirely.

Thanks in advance for any help.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Works for a Living
  • 1,262
  • 2
  • 19
  • 44
  • Your scoping is not proper when calling the function . Try changing that. See answer below and see if it works. – woofmeow Aug 11 '13 at 06:53

2 Answers2

2

Your window.onload function is an anonymous function which calls loadCapsChecker();

window.onload = function()
    { ....
      loadCapsChecker();
      ... //rest of your code
      ...

However loadCapsChecker(); was not defined as a global variable (Yes in JS variables can be functions ). Hence your window.onload function has no idea what loadCapsChecker(); refers to.

Try to declare the function loadCapsChecker(); with a global scope. It should work fine.

declare it before usage like this

var loadCapsChecker = function (){
 // Your function code same as above for loadCapschecker in your code
};
window.onload = function()
    { ....
      loadCapsChecker(); // Now this will because it can see the var "loadCapsChecker"
      ... //rest of your code
      ...

Hope that helps :)

woofmeow
  • 2,370
  • 16
  • 13
  • Thanks for your answers, woofmeow and nsawaya. I am a novice and am trying to figure out how to implement either of your answers. Bear with me. :) – Works for a Living Aug 11 '13 at 07:11
  • I'm just not adept enough to implement this, but I'm sure it would work, so I thank you very much. I'm going to do what nsawaya suggested and just make it a popup div. I appreciate your time! – Works for a Living Aug 11 '13 at 08:12
  • @Thom I have edited my answer to make it more understandable for you. Whenever you have time try to go through it. Its always better to learn . For now you can use the other technique but try learning more. If you still don't understand let me know :) – woofmeow Aug 11 '13 at 08:24
  • Thanks very much. I'll play with this and see if I can get it to work. So much appreciated! – Works for a Living Aug 11 '13 at 10:40
0

besides @woofmeow answer

you can get the one in focus using document.activeElement

see How do I find out which DOM element has the focus?

as a side note

why don't you just change the active form field text? or better off just use the alert

or some pop-up div

Community
  • 1
  • 1
nsawaya
  • 622
  • 5
  • 8