8

そこで、JavaScript/jQuery を使用して、フォームの Caps Lock 検出のソリューションを研究してきました。stackoverflow には、多くのソリューションを提供する巨大なスレッドがあります。しかし、唯一の問題は、Caps Lock が直接押されたかどうかをチェックしないことです。大文字が入力されたかどうか、シフト キーが押されていないかどうかを検出します。これの欠点は、ユーザーがフォームへの入力を開始するまで Caps Lock 警告メッセージのオン/オフが切り替わらないことです。これは最適ではありません。これが私のコードです。

document.onkeypress = function(e){
    e = e || window.event;
    var s = String.fromCharCode(e.keyCode || e.which);
    if (s.toUpperCase() === s && !e shiftKey) {
        capsWarning.style.visibility = 'visible';
    } else {
        capsWarning.style.visibility = 'hidden';
    }
}

Caps Lock キーを押したときに JavaScript で Caps Lock メッセージをトリガーできる、より良い方法はありますか? つまり、入力を開始するまでメッセージの切り替えを遅らせませんか?

できれば、JQuery よりも純粋な JavaScript ソリューションをお勧めします。ただし、jQuery がここで本当に本当に本当に優れていると思う場合は、その理由を教えてください。同僚に、ここに含めさせてくれるよう圧力をかけることができます ;o

4

4 に答える 4

0

これをchromeでテストしたところ、うまくいきました。このJavaScriptをタグに入れます

function  loadcaps ( e ) {
     e = e || window.event;
     var s = String.fromCharCode( e.keyCode || e.which );
     if ( s.toUpperCase() === s && !e.shiftKey ) {            
          capsWarning.style.visibility = 'visible';
     } else {
          capsWarning.style.visibility = 'hidden';
     }
  }

そしてそれをあなたのタグにつけてください

<body onload="loadcaps()">

それがあなたのために働くかどうか私に知らせてください。

于 2016-12-08T18:27:29.660 に答える
0

このコードを使用して、イベントをディスパッチしてみました。getModifierState MSDN、MDNはfalse 以外を返しません。これで、実際には「a」または「A」の文字をそのまま送信します。どちらの場合も、ハードコードされます。

getModifierState実際のキー押下の場合にのみ true を返します。

ただし、 IE 11には CapsLock の自動検出機能があります( for <input type="password" />) 。

            var eventType = "keypress";
            window.addEventListener ( eventType, function(e){
                var msg = "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" + "charCode: " + e.charCode + "\n" + e.getModifierState ( "CapsLock" );
                console.log ( msg );
            }, false );

            function simulateKeyEvent() {
                var evt = document.createEvent("KeyboardEvent");
                var initMethod = typeof evt.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

                evt[initMethod](
                    "keypress",         // type,
                    true,               // bubbles,
                    true,               // cancelable,
                    window,             // viewArg, 
                    0,                  // ctrlKeyArg,
                    0,                  // altKeyArg,
                    0,                  // shiftKeyArg,
                    0,                  // metaKeyArg, 
                    /* lower a */ 97,   //  keyCodeArg,
                    /* lower a */ 97    //  charCodeArg
                );
                window.dispatchEvent(evt);
            }
            simulateKeyEvent();
于 2015-08-20T11:58:49.710 に答える
-4

onkeydownハンドラーを使用します。

document.onkeypress=function(){console.log(arguments);}
于 2015-08-03T16:21:46.047 に答える