0

ユーザーがCAPS LOCKを有効にして入力を開始した場合、警告グラフィックを含む非表示のDIVを表示する大きなフォームとJSがあります。フォームのテキスト フィールド内に表示されるように 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 に答える