JavaScriptを使用してCaps Lockがオンになっているかどうかはどのようにしてわかりますか?


242

JavaScriptを使用してCaps Lockがオンになっているかどうかはどのようにしてわかりますか?

ただし、1つの注意点があります。Googleでそれを行ったので、onkeypressすべての入力にイベントを添付し、押された文字が大文字であるかどうかを毎回確認しました。そうでない場合は、Caps Lockをオンにする必要があります。これは本当に汚いと感じます... 無駄です -これより良い方法は確かにありますか?


198
私のユーザーの多くがこのようにそれらのフォームに記入する方法が多すぎるためです。
nickf 2009年

7
@nicf:それが理由なら、入力に対して正規表現を実行して、大文字が多すぎる場合は叫ぶのをやめるように頼んでみませんか?
いくつかの

155
これを行うには、もっと良い理由があります。ユーザーがパスワードを入力している場合、capslockがオンになっている場合に警告することは非常に役立ちます。
T Nguyen

23
ユーザーがinput type=passwordフィールドに入力すると、ブラウザが「Caps Lockがオン」の警告を実装する必要があるようです(input type=email
Chrome

8
すばらしい質問ですが、受け入れられた答えは8歳です。より良い反応がここに
Mac

回答:


95

試してみることができます。実用的な例を追加しました。入力にフォーカスがあるときにCaps Lockをオンにすると、LEDが赤になり、それ以外は緑になります。(mac / linuxではテストされていません)

注:どちらのバージョンも私のために働いています。コメントで建設的な入力をありがとう。

古いバージョン:https : //jsbin.com/mahenes/edit?js,output

また、これは修正されたバージョンです(誰かがMacでテストして確認できます)

新バージョン:https : //jsbin.com/xiconuv/edit?js,output

新しいバージョン:

function isCapslock(e){
    const IS_MAC = /Mac/.test(navigator.platform);

    const charCode      = e.charCode;
    const shiftKey      = e.shiftKey;

    if (charCode >= 97 && charCode <= 122){
      capsLock = shiftKey;
    } else if (charCode >= 65 && charCode <= 90 
               && !(shiftKey && IS_MAC)){
      capsLock = !shiftKey;
    }

    return capsLock;
}

古いバージョン:

関数isCapslock(e){

e = (e) ? e : window.event;

var charCode = false;
if (e.which) {
    charCode = e.which;
} else if (e.keyCode) {
    charCode = e.keyCode;
}

var shifton = false;
if (e.shiftKey) {
    shifton = e.shiftKey;
} else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
}

if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
}

if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
}

return false;

}

国際文字の場合、必要に応じて次のキーに追加のチェックを追加できます。興味のある文字のキーコード範囲を取得する必要があります。アドレス指定するすべての有効なユースケースキーを保持するキーマッピング配列を使用する場合もあります...

大文字のAZまたは 'Ä'、 'Ö'、 'Ü'、小文字のaZまたは0-9または 'ä'、 'ö'、 'ü'

上記のキーはサンプル表示にすぎません。


1
それはおそらく最良の実装ではありませんが、私がそれを書いたとき、私はそれをシンプルに保つことを試みていました。ブラウザーごとに対応する必要がある厄介な問題を実際に解決できる唯一の方法だと思います。

2
これをキーダウン(クロームで)と一緒に使用すると、すべてのコードがキャップとしてピックアップされることがわかりました。キープレスを使用する場合、それは動作します。
Tim

2
すべての国際文字の可能な文字の組み合わせを見つけることは、いくつかのケースを見逃すことになります。大文字と小文字を確認するには、代わりにtoUpper / Lower caseメソッドを使用します。
2015年

3
完全に偽の回答-文字コードとアスキー(!!!)を混同すること-が驚くほど多くの賛成票を集めることができると驚いています。誰もチェックしたことがない???
GameAlchemist 2015年

1
Mozillaよると、event.thisはWeb標準から削除されていること注意してください。
verism

130

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


5
実際... fromCharCodeを使用すると、チェックする必要がなくなります。ただし、keydownとkeypressは異なる文字コードを提供することに注意してください。これが最初に問題が発生した場所です。
シェ

4
-1 bcこれは、CAPSがオンのときにシフトを押さなかった場合にのみ機能します。

1
誰かがブートストラップ付きのライブの例を見たいので、ここで見ることができますbootply.com/91792
Govinda Rajbhar

この回答は役に立ちました。@D_Nで言及されている欠陥のため、この回答の条件を改善しました。シフトを押している間は機能しないということです。
SebasSBM 2018

105

あなたは使うことができます KeyboardEvent最近のブラウザのCaps Lockを含む多数のキーを検出するためにます。

getModifierState機能はの状態を提供します:

  • Alt
  • AltGraph
  • キャップスロック
  • コントロール
  • Fn(Android)
  • メタ
  • NumLock
  • OS(WindowsおよびLinux)
  • スクロールロック
  • シフト

このデモは、モバイル(caniuse)を含むすべての主要なブラウザで動作します。

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

6
私は重複/類似の質問でこれに答え、これは現在Chromeサポートを持っているという別のユーザーによって更新されました。私はこれを確認したので、すべての主要なブラウザで動作するようになりました-そして、この質問に対する最良の解決策になるはずです
Ian Clark

caniuse.com/#search=getModifierStateは、Safariではまだサポートされていない(まだ?)と述べています。したがって、すべての主要なブラウザで、まだそうであるとは限りません。
Jens Kooij

2
現在、Safariでサポートされています。
Mottie 2017年

1
それでも、ユーザーがフォームに入力すると、Capslockプレスが検出され、一般的なCapslock状態を取得できません...
SparK

これは、Caps Lockキーをオフの位置に押した場合を除いて機能するようです。次のキーが押されるまで、その入力は取得されません。これはOS X版Chromeで発生しました。これがブラウザやOSにまたがるものかどうかはわかりません。
Ashraf Slamang 2018

24

ドキュメントでキープレスキャプチャを使用して、「大文字でシフトを押さない」でCaps Lockを検出できます。ただし、ドキュメントのハンドラーに到達する前に、他のキープレスハンドラーがイベントバブルをポップしないことを確認してください。

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')
  }
}

このイベントをサポートするブラウザでキャプチャ段階でイベントを取得することもできますが、すべてのブラウザで機能するわけではないため、無意味なようです。

Caps Lockステータスを実際に検出する他の方法は考えられません。とにかくチェックは簡単で、検出できない文字が入力された場合は、まあ...検出する必要はありませんでした。

昨年はこれについて24通りの記事がありまし。かなり良いですが、国際的なキャラクターのサポートがありません(toUpperCase()それを回避するために使用します)。


これは実際に私が探していたものです。これはラテン語とキリル文字列で機能します。ありがとう!
Mladen Janjetovic 2013

これは適切に機能しますが、スペースや数字などのキーは警告の手がかりになります。(同様に簡潔でエレガントな)回避策を知っていますか?

1
また、不完全に気付くのは良いことですが、それでもまだ不完全です。この方法でそれを修正する方法がわかりません。

11

多くの既存の回答では、Shiftキーが押されていないときにCaps Lockオンがチェックされますが、Shiftキーを押して小文字になった場合はチェックされません。または、それがチェックされますが、Caps Lockがオフになっていないか、またはチェックされますが、非アルファキーを「オフ」と見なします。以下は、アルファキーが大文字で押された場合(ShiftまたはShiftなし)に警告を表示し、大文字なしでアルファキーが押された場合に警告をオフにしますが、警告をオフまたはオンにしない、適応されたjQueryソリューションです。数字またはその他のキーが押された。

$("#password").keypress(function(e) { 
    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)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //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)
  });

11

JQuery。これはFirefoxでのイベント処理をカバーし、予期しない大文字と小文字の両方をチェックします。これは、表示する警告がある(ただし、それ以外の場合は非表示になっている)<input id="password" type="password" name="whatever"/>要素とID ' 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();
    }
});

理由はわかりませんが、この方法は最初のキー操作では機能しません(Chromeでのみテスト済み)。

空のフィールド非表示の問題でしょうか?少なくともChromeでは、これを正しく機能させることができませんでした。バックスペースがmssgを数えて空白にするため、他の多くのブラウザで自動的に発生します(少なくとも、私のバージョンでは以下)。

:ここでは正しく使用しているkeypressため、keydownkeyupは常に大文字を返すため、イベントを使用して入力で異なる大文字小文字を使用する必要があります。したがって、これはcapslockキーを起動しません...と組み合わせる場合e.originalEvent.getModifierState('CapsLock')
カイルミット2018

6

ここでの上位の回答は、いくつかの理由(コメントなしのコードで、デッドリンクと不完全なソリューションがある)のために機能しませんでした。だから、私は数時間かけてみんなを試し、私ができる限りのベストを手に入れました:jQueryと非jQueryを含む私のものです。

jQuery

jQueryはイベントオブジェクトを正規化するため、一部のチェックが欠落していることに注意してください。また、それをすべてのパスワードフィールドに絞り込み(それが必要になる最大の理由であるため)、警告メッセージを追加しました。これは、Chrome、Mozilla、Opera、IE6-8でテストされています。数字やスペースが押された場合を除き、すべてのcapslock状態を安定してキャッチします。

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

jQueryなし

他のjQueryを使用しないソリューションの一部には、IEフォールバックがありませんでした。@Zappaがパッチを当てました。

document.onkeypress = function ( e ) {
    e = (e) ? e : window.event;

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

注:@ Borgar、@ Joe Liversedge、および@Zappaのソリューションと、@ Pavel Azanovが開発したプラグインをチェックしてください。範囲がA-Za-zを超えて拡大する方法を知っている場合は、編集してください。また、この質問のjQueryバージョンは重複してクローズされているため、ここに両方を投稿しています。


4
優れたソリューションには、常に英字AZ以外の文字のサポートを含める必要があります。その他の解決策は、ほとんどすべての英語以外の言語に対する侮辱です。
畏敬の念2014

6

私たちは、使用getModifierStateのキャップがロックを我々が使用することはできませんので、それだけで、マウスやキーボードイベントのメンバーで、チェックしますonfocus。パスワードフィールドがフォーカスを得る最も一般的な2つの方法は、クリックまたはタブを使用することです。私たちは、使用onclick入力中にマウスクリックを確認するために、我々は、使用onkeyup前の入力フィールドからタブを検出します。パスワードフィールドがページ上の唯一のフィールドであり、オートフォーカスされている場合、最初のキーが離されるまでイベントは発生しません。これは問題ありませんが、理想的ではありません。パスワードフィールドが取得されたら、Caps Lockツールのヒントを表示します。フォーカスが、ほとんどの場合、このソリューションは魅力のように動作します。

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq


見事!私の実装ではシンプル、簡潔、そして完璧です。
Sirtastic、2018

1
@ライアン:貢献してくれてありがとう!それは私があなたの答えは基本的に同じであると指摘したいと思いますけれども、良い、コードのクリーンな例だMottieの返信 2015年から、どこが採用両方event.getModifierState("CapsLock").
マック

5

私はこれが古いトピックであることを知っていますが、他の人を助けるためにフィードバックするつもりです。この質問に対する答えはどれも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> 

IE8-修正をありがとう。修正後の回答(下記)に組み込みました。しかし、これは確かです。

5

これは、書き込み時の状態のチェックに加えて、Caps Lockキーが押されるたびに警告メッセージを切り替える(いくつかの制限付き)ソリューションです。

それはに対して、文字列の文字チェックするように、それはまた、AZの範囲外の非英語文字をサポートtoUpperCase()し、toLowerCase()代わりに文字範囲に対してチェックを。

$(function(){
  //Initialize to hide caps-lock-warning
  $('.caps-lock-warning').hide();

  //Sniff for Caps-Lock state
  $("#password").keypress(function(e) {
    var s = String.fromCharCode( e.which );
    if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
       (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
      this.caps = true; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').show();
    } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
              (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
      this.caps = false; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').hide();
    }//else else do nothing if not a letter we can use to differentiate
  });

  //Toggle warning message on Caps-Lock toggle (with some limitation)
  $(document).keydown(function(e){
    if(e.which==20){ // Caps-Lock keypress
      var pass = document.getElementById("password");
      if(typeof(pass.caps) === 'boolean'){
        //State has been set to a known value by keypress
        pass.caps = !pass.caps;
        $(pass).next('.caps-lock-warning').toggle(pass.caps);
      }
    }
  });

  //Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

キャップスロックの切り替えの監視が役立つのCaps Lockは、キーが押される前のキャップスロックの状態がわかっている場合のみです。現在のCaps Lockの状態はcaps、パスワード要素のJavaScriptプロパティで保持されます。これは、ユーザーが大文字または小文字の文字を押したときに、Caps Lock状態が初めて検証されたときに設定されます。ウィンドウがフォーカスを失うと、Caps Lockの切り替えを観察できなくなるため、不明な状態にリセットする必要があります。


2
良いアイデア。Caps Lockがオンになっていることをユーザーに警告する場合は、Caps Lockが無効になったらすぐに警告をオフにすることをお勧めします。オフにしないと、ユーザーを混乱させる可能性があります。
Ajedi32 2015年

3

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

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


3

Twitterブートストラップを使用したjQueryの場合

次の文字がロックされているキャップを確認してください。

大文字のAZまたは 'Ä'、 'Ö'、 'Ü'、 '!'、 '"'、 '§'、 '$'、 '%'、 '&'、 '/'、 '('、 ')' 、 '='、 ':'、 ';'、 '*'、 '' '

小文字のaZまたは0-9または 'ä'、 'ö'、 'ü'、 '。'、 '、'、 '+'、 '#'

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
    var kc = e.which; // get keycode

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

jsfiddleのライブデモ


3

Caps Lockの状態を示す変数:

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


1
古い質問に最新の答えを与えることに賛成。あなたは「2017用の更新」または「これを(> 2017-)最近のブラウザのためにしてみてください」のようなものを言って、見出しのようなものを追加することをお勧めします
EON

3

@ user110902が投稿したこのjQueryベースの回答は私にとって役に立ちました。ただし、@ B_Nのコメントに記載されている欠陥を防ぐために少し改善しました。Shiftキーを押している間、CapsLockを検出できませんでした。

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

このように、Shiftキーを押していても機能します。


2

このコードは、大文字または小文字に関係なく、またはShiftキーが押されたかどうかを検出します。

$('#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');
    }
});

これにより、Firefoxではスペースとバックスペースが大文字として検出されます。
エイドリアンロスカ2014年

2

私はcapsLockと呼ばれるライブラリーを作成しました。これは、まさにあなたがやりたいことを実行します。

あなたのウェブページにそれを含めてください:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

次に、次のように使用します。

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

デモを見る:http : //jsfiddle.net/3EXMd/

Caps Lockキーを押すと、ステータスが更新されます。Shiftキーハックのみを使用して、Caps Lockキーの正しいステータスを判断します。最初のステータスはfalseです。だから注意してください。


これは本当に独創的な解決策です。しかし、ページにフォーカスが移ったときにCaps Lockがオンになっていると、「capslock」オブジェクトが誤った状態(オフ)で始まるというバグがあります。
Ric

実際、それは誤った状態で始まります。ただし、いずれかのキーを押すと、その状態が自動的に修正されます。ページがフォーカスを取得したときに正しい状態に設定する方法を見つけられる場合は、コードをマージできれば幸いです。
Aadit M Shah 2014

2

さらに別のバージョンは、明快でシンプルで、シフトされた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の意味が逆転した、修正済み。

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

  • e.keyCodeの代わりにe.charCodeを使用し、0の値をチェックすると、特定の言語または文字セットに固有のコードを記述せずに、多くの非文字キープレスがスキップされます。私の理解では、互換性は少し低いため、古い、非メインストリーム、またはモバイルブラウザーは、このコードが期待するとおりに動作しない可能性がありますが、いずれにしても、私の状況では価値があります。

  • 既知の句読コードのリストをチェックすると、大文字のロックの影響を受けないため、誤検出と見なされなくなります。これがないと、句読点文字を入力すると、Caps Lockインジケーターが非表示になります。含まれるセットではなく、除外されたセットを指定することにより、拡張文字との互換性が向上します。これは最も醜く、特別なケースであり、非西洋言語では問題になるほど十分に異なる句読点や句読点コードがある可能性がありますが、少なくとも私の状況ではIMOの価値があります。


2

反応する

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }

1

@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>

1

上記のMottieDiego Vieiraの 応答は、私たちが最終的に使用したものであり、今では受け入れられる答えになるはずです。ただし、気付く前に、文字コードに依存しないこの小さな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)

しかし、繰り返しになりますが、@ Mottie sと@Diego Vieira sの応答を使用するだけになりました


0

この下のコードでは、Capsがオンになり、シフトを使用してキーを押したときにアラートが表示されます。

falseを返す場合。その場合、現在の文字はテキストページに追加されません。

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

Caps Lockがオンの場合にのみ機能します。Caps Lockがオフの場合でも、Caps Lockはオンであるが、Shiftキーが押されている(両方ともShiftキーが実際に押されているかどうかにかかわらず)と報告されます。
畏敬の念2014

OK @Aweについて申し訳ありません
M

0

簡単なコードをわかりやすく試してみてください

これはスクリプトです

 <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> 

0

このコードを使用してみてください。

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

幸運を :)



0

以下は、jquery uiを使用したカスタムjqueryプラグインで、このページのすべての優れたアイデアで構成され、ツールチップウィジェットを活用しています。Caps Lockメッセージはすべてのパスワードボックスに自動的に適用され、現在のHTMLを変更する必要はありません。

カスタムプラグインコード...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style="white-space: nowrap;"/>')
                        .append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
                var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed

                // uppercase w/out shift or lowercase with shift == caps lock
                if ((isUp && !isShift) || (isLow && isShift)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

すべてのパスワード要素に適用...

$(function () {
    $(":password").capsLockAlert();
});

0

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> 

0

それは私が知っている遅いですが、これは他の誰かの助けになるかもしれません。

だからここに私の最も簡単な解決策があります(トルコのcharsを使って);

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

0

だから私はこのページを見つけましたが、私が見つけた解決策があまり好きではなかったので、私はそれを見つけ出し、すべての人にそれを提供しています。私にとっては、文字を入力しているときにCaps Lockがオンになっているかどうかだけが重要です。このコードは私のために問題を解決しました。その迅速かつ簡単で、必要なときにいつでも参照できる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;
  }
});


-1

入力時にcaplockがオンの場合、現在の文字を自動的に小文字に変換できます。そうすれば、caplocksがオンになっていても、現在のページのように動作しません。ユーザーに通知するには、caplocksがオンになっているが、フォームエントリが変換されていることを示すテキストを表示できます。


はい。ただし、Caps Lockを検出する必要があります。さらに、これはパスワードの大文字を許可しないことを意味します。これは最適ではありません。
Dave Liepmann、2012

Caps Lockがオンになっているかどうかを検出するには、送信した文字の小文字バージョンがそれと異なるかどうかを確認する必要があります。それが-> Caps Lockである場合は、«警告:Caps Lockを使用していますが、システムは変換中です小文字»、私は結局のところJavaScriptがCaps Lockを検出することを意図していないと思います(Caps Lockをチェックすることはシステムアクセスを必要とする)、あなたはあなたのニーズに最も合う方法を見つける必要があります
Frederik.L

-1

caps-lockを検出するためのはるかに単純なソリューションがあります。

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.