JavaScript を使用して Caps Lock がオンになっているかどうかを確認するにはどうすればよいですか?
ただし、1 つの注意点: Google で検索したところ、見つけた最善の解決策は、onkeypressすべての入力にイベントを添付し、押された文字が大文字かどうかを毎回確認し、大文字の場合はシフトも押されたかどうかを確認することでした。そうでない場合は、Caps Lock がオンになっている必要があります。これは本当に汚く、ただ...もったいないと感じます。これよりも良い方法があるのではないでしょうか?
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。
を使用して、KeyboardEvent最新のブラウザで Caps Lock を含む多数のキーを検出できます。
このgetModifierState関数は、次の状態を提供します。
このデモは、モバイル ( caniuse ) を含むすべての主要なブラウザーで動作します。
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
あなたはそれを試すことができます..実際の例を追加しました。フォーカスが入力にある場合、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;
}
古いバージョン:
function 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;
}
国際文字の場合、必要に応じて次のキーのチェックを追加できます。関心のある文字のキーコード範囲を取得する必要があります。おそらく、対処しているすべての有効なユース ケース キーを保持するキーマッピング配列を使用することによって可能です...
大文字の A ～ Z または 'Ä'、'Ö'、'Ü'、小文字の a ～ Z または 0 ～ 9 または 'ä'、'ö'、'ü'
上記のキーは単なるサンプル表現です。
ドキュメントのキープレス キャプチャを使用して、「is letter uppercase and no shift press」を使用して 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()それを回避するために使用します)。
多くの既存の回答は、シフトが押されていないときにキャップスロックがオンになっているかどうかをチェックしますが、シフトを押して小文字を取得した場合はチェックしません。または、それをチェックしますが、キャップスロックがオフになっているかどうかもチェックしません。非アルファ キーは「オフ」と見なされます。これは、英字キーが大文字 (シフトまたはシフトなし) で押された場合に警告を表示し、英字キーが大文字なしで押された場合に警告をオフにしますが、次の場合に警告をオフまたはオンにしない、適応された 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)
});
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();
}
});
Caps Lock をチェックするために使用します。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");
}
}
これは、書き込み時に状態をチェックすることに加えて、Caps Lockキーが押されるたびに警告メッセージを切り替えるソリューションです (いくつかの制限があります)。
また、文字の範囲に対してチェックする代わりにtoUpperCase()文字列の文字をチェックするため、AZ 範囲外の英語以外の文字もサポートします。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 LockCaps Lock のトグルを観察することは、キーが押される前に Caps Lock の状態がわかっている場合にのみ役立つことに注意してください。現在の Caps Lock の状態はcaps、password 要素の JavaScript プロパティで保持されます。これは、ユーザーが大文字または小文字の文字を押したときに Caps Lock 状態を初めて検証したときに設定されます。ウィンドウがフォーカスを失った場合、Caps Lock の切り替えを観察できなくなるため、不明な状態にリセットする必要があります。
これが古いトピックであることは知っていますが、他の人に役立つ場合に備えてフィードバックすると思いました. 質問に対する答えはどれも IE8 では機能しないようです。ただし、IE8で動作するこのコードを見つけました。（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 プラグインを作成しました。Caps Lock 番号の認識もサポートしています。(標準のドイツ語キーボード レイアウトでは、Caps Lock は数字に影響します)。
ここで最新バージョンを確認できます: jquery.capsChecker
私はcapsLockと呼ばれるライブラリを作成しました。これはまさにあなたがやりたいことを行います。
Web ページに含めるだけです。
<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です。だから用心してください。
それは私にとってはうまくいったので、@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>
シンプルなコードを理解しやすく試してみてください
これがスクリプトです
<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>
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>
以下のコードでは、Caps Lock がオンになり、Shift を使用してキーを押すとアラートが表示されます。
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;
}
});
このコードを使用してみてください。
$('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
});
幸運を ：）
入力時に caplock がオンの場合、現在の文字が自動的に小文字に変換されます。そうすれば、caplocks がオンになっていても、現在のページにあるようには動作しません。ユーザーに通知するために、caplocks がオンになっていることを示すテキストを表示できますが、フォーム エントリは変換されます。
caps-lock を検出するためのより簡単な解決策があります。
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
jQueryの場合:
$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});
この jQuery プラグイン( code ) は、 Rajesh の回答と同じアイデアをもう少し簡潔に実装しています。