Javascript 在同一页面上多次重复相同的JS函数

我有一个大表单和一个JS，如果用户开始输入时启用了CAPS LOCK，它会显示一个隐藏的DIV，并显示一个警告图形。我已将DIV定位为显示在表单文本字段中。不过，我需要在几个单独的字段中重复此函数，每个字段调用不同的类，以便警告图形只显示在用户当前正在键入的特定字段中。我将发布JS，然后是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>

然后，我在输入字段上放置了一个“capLocksCheck”类，然后是以下HTML：

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

到

但很明显，这是行不通的。它只是完全禁用了该功能

---

提前感谢您的帮助

您的

窗口。onload

函数是一个匿名函数，它调用

loadCapsChecker（）

希望有帮助：）
除了@woofmeow答案

您可以使用
document.activeElement

看

作为旁注

为什么不直接更改活动表单字段文本？或者最好使用警报

或者一些弹出div
调用函数时，您的作用域不正确。试着改变一下。看看下面的答案，看看它是否有效。谢谢你的回答，woofmeow和nsawaya。我是一个新手，正在尝试找出如何实现你的答案。请容忍我。：）我只是不够熟练，无法实现这一点，但我相信它会奏效，所以我非常感谢你们。我会按照nsawaya的建议去做，把它做成一个弹出的div。谢谢你的时间@汤姆：我对我的答案进行了编辑，让你更容易理解。只要你有时间，试着去经历它。学习总是更好的。现在你可以使用另一种技巧，但试着学习更多。如果你仍然不明白，请告诉我：）非常感谢。我会玩这个，看看能不能用。非常感谢！出于美学原因，我没有使用基本警报。如果我不知道如何实现activeElement建议或woofmeow的全局范围，我可能会求助于弹出div。还在研究。谢谢。如果我把“var inputs=document.getElementsByTagName（'INPUT'）；”改为“var inputs=document.activeElement；”这就是你的意思吗？我想我要走弹出div路线了。我非常感谢你的帮助！
<div id="capsLockNotice">
            <img src="/images/capslock-notice.png" title="Please disable Caps Lock." alt="Please disable Caps Lock." />
        </div>

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

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

window.onload = function()
    { ....
      loadCapsChecker();
      ... //rest of your code
      ...
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
      ...