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

Question

如果用户在启用 CAPS LOCK 的情况下开始输入，我有一个大表单和一个 JS 来显示带有警告图形的隐藏 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>

还有 CSS:

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

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

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

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

我需要做的是让几个特定的​​表单域中的每一个都调用自己独特的 Div 类，这样警告图形只出现在用户当前正在键入的特定域中。如何修改JS让不同的字段调用不同的类？我第二次尝试复制并粘贴整个代码，并进行了更改

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

到

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

但显然那是行不通的。它只是完全禁用了该功能。

在此先感谢您的帮助。

Answer 1

您的 window.onload 函数是一个匿名函数，它调用 loadCapsChecker();

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

但是 loadCapsChecker(); 没有定义为全局变量(是的，在 JS 中变量可以是函数)。因此，您的 window.onload 函数不知道 loadCapsChecker(); 指的是什么。

尝试在全局范围内声明函数 loadCapsChecker();。它应该可以正常工作。

像这样在使用前声明

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

希望对您有所帮助:)