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变量中的Yes可以是函数）。因此，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
      ...

希望有所帮助：）

Answer 2

除了@woofmeow回答

您可以使用document.activeElement

获得焦点

请参阅How do I find out which DOM element has the focus?

作为附注

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

或一些弹出式div

在同一页面上多次重复相同的JS功能

2 个答案: