0

如果用户在启用 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";

但显然这不起作用。它只是完全禁用了该功能。

提前感谢您的帮助。

4

2 回答 2

2

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

window.onload = 函数（）
    { ....
      loadCapsChecker();
      ... //其余的代码
      ...

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

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

在这样使用之前声明它

var loadCapsChecker = 函数 (){
 // 您的代码中的 loadCapschecker 函数代码与上面相同
};
window.onload = 函数（）
    { ....
      loadCapsChecker(); // 现在这将是因为它可以看到 var "loadCapsChecker"
      ... //其余的代码
      ...

希望有帮助:)

于 2013-08-11T06:52:25.620 回答
0

除了@woofmeow 答案

您可以使用document.activeElement

请参阅如何找出哪个 DOM 元素具有焦点？

作为旁注

你为什么不改变活动的表单域文本呢？或者最好只使用警报

或一些弹出式 div

于 2013-08-11T06:56:45.697 回答