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


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ように、間違いを避けてください。

Question

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

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




ここでは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();
});



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



反応する

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



さらに別のバージョンでは、シンプルでシンプルで、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の価値があります。




このコードは、大文字と小文字の区別なく、または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');
    }
});



このコードでは、Capsがオンになったときに警告を表示し、Shiftキーを押してキーを押します。

我々が偽を返すならば。 現在の文字はテキストページに追加されません。

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

がんばろう :)




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



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

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



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

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




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

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

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

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

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




ここでのトップの回答は、いくつかの理由で(デッドリンクと不完全な解決策を含む非コメントのコード)私にとってはうまくいきませんでした。 だから私は数時間をかけてみんなに試して、できる限りのものを得ました。jQueryとnon-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のバージョンは重複していませんので、ここで両方を投稿しています。