固定 大文字 JavaScriptを使用してcaps lockがオンになっているかどうかをどのように判断しますか?




15 Answers

jQueryでは、

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

バックスペースキーs.toLowerCase() !== sように、間違いを避けてください。

capslock 無効

JavaScriptを使用してcaps lockがオンになっているかどうかをどのように判断しますか?

1つの注意点:私はそれをgoogleして、私が見つけることができる最高の解決策は、すべての入力にonkeypressイベントを添付し、押された文字が大文字であるかどうかを毎回確認し、シフトされていないかどうかを確認することでした。 そうでなければ、キャップロックがオンになっている必要があります。 これは本当に汚いと感じるだけです... 無駄です - 確かにこれよりも良い方法がありますか?




文書のキー押下キャプチャを使用して、「大文字で、大文字でシフトなし」を使用して、大文字/小文字のロックを検出できます。 しかし、他のkeypressハンドラが、ドキュメント上のハンドラに到達する前にイベントバブルをポップしないようにしてください。

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

それをサポートするブラウザでは、キャプチャ段階でイベントを取得できますが、すべてのブラウザで動作しないため、多少意味がないようです。

私は実際にキャップのロック状態を検出する他の方法は考えられません。 とにかくチェックが簡単で、検出できない文字が入力された場合は、うまく...検出する必要はありませんでした。

この昨年、24通りの記事がありまし 。 かなり良いですが、国際的な文字のサポートが欠けていますtoUpperCase()それを回避するtoUpperCase()を使用してください)。




JQueryで。 これはFirefoxでのイベント処理をカバーし、予期しない大文字と小文字の両方をチェックします。 これは、 <input id="password" type="password" name="whatever"/>要素と、idを ' capsLockWarning 'とし、表示したいという警告を持った別の要素をcapsLockWarningとしています。

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});



私はこれが古い話題だと知っていますが、他者を助ける場合には、私はフィードバックを返すと考えました。 この質問への回答はIE8ではうまくいきません。 私はIE8で動作するこのコードを見つけました。 (HaventはまだIE8以下のものをテストしました)。 これは、必要に応じてjQuery用に簡単に変更できます。

function capsCheck(e,obj){ 
    kc = e.keyCode?e.keyCode:e.which;  
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);  
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
        document.getElementById('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

関数は次のようにonkeypressイベントを通じて呼び出されます。

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 



最近hashcode.com について同様の質問があり、 それに対処するためのjQueryプラグインを作成しました。 また、数字の大文字ロックの認識もサポートしています。 (標準的なドイツ語のキーボードレイアウトでは、キャップロックは数字に影響します)。

ここで最新バージョンを確認できます: jquery.capsChecker




キャップロック状態を示す変数:

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

すべてのブラウザで動作する=> caniuse




このコードは、大文字と小文字の区別なく、またはShiftキーが押されていても、caps lockを検出します。

$('#password').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( (s.toUpperCase() === s && !e.shiftKey) || 
             (s.toLowerCase() === s && e.shiftKey) ) {
        alert('caps is on');
    }
});



さらに別のバージョンでは、シンプルでシンプルで、capsLockをシフトして扱い、asciiに制約されていないと思います。

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

編集: capsLockOnの感覚が逆転した、doh、修正されました。

編集#2:これをもう少し調べた後、残念ながらもう少し詳細なコードをいくつか変更しましたが、より多くのアクションを適切に処理します。

  • e.keyCodeの代わりにe.charCodeを使用し、0の値をチェックすると、指定された言語または文字セットに固有のものをコーディングせずに、多くの非文字キー押下をスキップします。 私の理解では、互換性がやや劣りますので、古い、非主流の、またはモバイルブラウザは、このコードが期待しているように動作しないかもしれませんが、とにかく私の状況では、それは価値があります。

  • 既知の句読点コードのリストをチェックすると、偽のネガティブとみなされることはありません。なぜなら、それらはキャップロックの影響を受けないからです。 これがなければ、句読点文字を入力するとcaps lockインジケータが非表示になります。 含まれているセットではなく除外セットを指定することにより、拡張文字との互換性が向上するはずです。 これは最も醜い、特別なカジノのビットであり、非西洋言語が問題となるには十分な句読点や句読コードを持っている可能性がありますが、少なくとも私の状況ではそれはIMOの価値があります。




@ joshuahedlundの答えに基づいて、それは私のためにうまくいきました。

私はコードを関数にして再利用できるようにし、私の場合はそれを身体にリンクさせました。 パスワードフィールドにリンクすることもできます。

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>



responseは、私たちが使い終わったものであり、現在受け入れられている回答でなければなりません。 しかし、私が気づく前に、私は文字コードに依存しないこの小さなjavascript関数を書いた...

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

次に、 capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)イベントハンドラで呼び出すcapsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

しかし再び、私​​たちは@Mottie sと@Diego Vieiraのレスポンスを使用して終了しました




理解しやすいシンプルなコードを試してみてください

これはスクリプトです

 <script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
  document.getElementById('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

そして、Html

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 



このスクリプトを使用することができます。 Shiftキーを押してもWindows上でうまくいくはずですが、Mac OSでは動作しません。




Javascriptコード

<script type="text/javascript">
   function isCapLockOn(e){
   kc = e.keyCode?e.keyCode:e.which;
   sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
   if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
       document.getElementById('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

このスクリプトをHtmlを使って関連付ける必要があります

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 



だから私はこのページを見つけて、見つけたソリューションが本当に好きではなかったので、私はそれを考え出し、皆さんにそれを提供しています。私が文字を入力している場合は、キャップのロックがオンになっているかどうかだけが重要です。このコードは私の問題を解決しました。その迅速かつ簡単に、必要に応じていつでも参照できるcapsIsOn変数を提供します。

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if(letter.length===1 && letter.match(/[A-Za-z]/)){
        if(letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if(capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});




caps-lockを検出するもっと簡単なソリューションがあります:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}



Related