JavaScript를 사용하여 Caps Lock이 켜져 있는지 어떻게 알 수 있습니까?

JavaScript를 사용하여 Caps Lock이 켜져 있는지 어떻게 알 수 있습니까?

한 가지주의 사항 : 나는 구글에 그것을 찾을 수있는 가장 좋은 해결책은 onkeypress모든 입력에 이벤트 를 첨부 한 다음 눌러 진 문자가 대문자인지 매번 확인한 다음 문자가 대문자인지 확인한 다음 시프트가 억제되었는지 확인했습니다. 그렇지 않은 경우 캡 잠금이 켜져 있어야합니다. 이것은 정말로 더럽고 단지 낭비입니다 . 확실히 이것보다 더 좋은 방법이 있습니까?

시도해 볼 수 있습니다. 실제 예제를 추가했습니다. 초점이 입력에있을 때, 캡 잠금을 켜면 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 또는 'ä', 'ö', 'ü'

위의 키는 단지 샘플 표현입니다.

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최신 브라우저에서 캡 잠금을 포함하여 수많은 키를 감지 할 수 있습니다 .

이 getModifierState함수 는 다음 상태를 제공합니다.

• Alt
• AltGraph
• CapsLock
• 제어
• Fn (Android)
• 메타
• Num 잠금
• 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
});

문서의 키 누르기 캡처를 사용하여 "문자 대문자이며 Shift 키를 누르지 않음"을 사용하여 대문자 잠금을 감지 할 수 있습니다. 그러나 다른 키 누르기 핸들러가 문서의 핸들러에 도달하기 전에 이벤트 버블을 팝업하지 않는 것이 좋습니다.

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()이를 해결하기 위해 사용 ).

기존의 많은 답변은 Shift 키를 누르지 않을 때 Caps Lock이 켜져 있는지 확인하지만 Shift 키를 누르고 소문자를 입력하면이를 확인하지 않거나 확인하지만 Caps Lock이 꺼져 있는지 확인하지는 않습니다. 알파가 아닌 키를 'off'로 간주합니다. 다음은 알파 키를 대문자로 눌렀을 때 (shift 또는 no 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)
  });

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

여기에있는 최고의 답변은 몇 가지 이유로 인해 작동하지 않았습니다 (불량 링크와 불완전한 솔루션이있는 주석 처리되지 않은 코드). 그래서 나는 몇 시간 동안 모두를 시험 해보고 최선을 다했습니다. 여기 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-less 솔루션 중 일부에는 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 버전은 중복으로 닫혀 있으므로 여기에 두 가지 모두 게시하고 있습니다.

getModifierStateCaps Lock을 확인 하는 데 사용 하며 마우스 또는 키보드 이벤트의 멤버 일 뿐이므로를 사용할 수 없습니다 onfocus. 암호 필드에 초점을 맞추는 가장 일반적인 두 가지 방법은 클릭 또는 탭을 사용하는 것입니다. 우리는 사용 onclick입력에서 마우스 클릭을 확인하고, 우리가 사용하는 onkeyup이전의 입력 필드에서 탭을 감지 할 수 있습니다. 비밀번호 필드가 페이지의 유일한 필드이고 자동으로 초점이 맞춰지면 첫 번째 키를 놓을 때까지 이벤트가 발생하지 않지만 이상적이지 않습니다. 비밀번호 필드가 확보되면 캡 잠금 도구 팁이 표시되기를 원합니다. 초점이지만 대부분의 경우이 솔루션은 매력처럼 작동합니다.

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

나는 이것이 오래된 주제라는 것을 알고 있지만 다른 사람들을 도울 수 있도록 피드백을 줄 것이라고 생각했습니다. 이 질문에 대한 답변 중 어느 것도 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> 

이것은 쓸 때 상태를 확인하는 것 외에도 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 상태는 capspassword 요소 의 JavaScript 속성으로 유지됩니다 . 사용자가 대문자 또는 소문자 일 수있는 문자를 누를 때 처음으로 Caps Lock 상태를 확인할 때 설정됩니다. 창이 초점을 잃으면 더 이상 Caps Lock 토글을 볼 수 없으므로 알 수없는 상태로 재설정해야합니다.

최근 hashcode.com에 비슷한 질문 이 있었고 처리하기 위해 jQuery 플러그인을 만들었습니다. 또한 숫자에 대한 대문자 잠금 인식을 지원합니다. 표준 독일어 키보드 레이아웃 캡 잠금은 숫자에 영향을 미칩니다.

jquery.capsChecker 에서 최신 버전을 확인할 수 있습니다.

트위터 부트 스트랩이있는 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의 라이브 데모

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

@ 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 키를 누른 상태에서도 작동합니다.

이 코드는 경우 또는 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');
    }
});

나는 당신이 원하는 것을 정확하게하는 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 키를 누르면 상태가 업데이트됩니다. Caps Lock 키의 올바른 상태를 확인하기 위해 Shift 키 핵만 사용합니다. 초기 상태는 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 값을 확인하면 지정된 언어 또는 문자 세트에 특정한 코드를 작성하지 않고 문자가 아닌 많은 키 누르기를 건너 뜁니다. 내 이해로는 약간 덜 호환 가능하므로 구형, 비 주류 또는 모바일 브라우저는이 코드가 예상하는 것처럼 작동하지 않을 수 있지만 어쨌든 내 상황에는 가치가 있습니다.

• 알려진 문장 부호 목록을 확인하면 코드 잠금에 의해 영향을받지 않기 때문에 잘못된 부정으로 표시되지 않습니다. 이를 사용하지 않으면 문장 부호 문자를 입력 할 때 대문자 잠금 표시기가 숨겨집니다. 포함 된 세트가 아닌 제외 된 세트를 지정하면 확장 문자와 더 호환 가능해야합니다. 이것은 가장 추악하고 특별한 casiest이며 비 서구 언어가 문장 부호 및 / 또는 구두점 코드가 문제가 될만큼 충분히 다른 가능성이 있지만 적어도 내 상황에서는 IMO의 가치가 있습니다.

반응

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

그것이 나를 위해 잘 작동했기 때문에 @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>

위의 Mottie 와 Diego Vieira의 답변 은 우리가 사용한 결과이며 지금은 정답입니다. 그러나 그것을 알기 전에 문자 코드에 의존하지 않는이 작은 자바 스크립트 함수를 작성했습니다 ...

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와 @Diego Vieira의 응답을 사용하여 끝났습니다.

아래 코드에서 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;
    }
});

이해하기 쉬운 간단한 코드로 시도해보십시오.

이것은 스크립트입니다

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

이 코드를 사용해보십시오.

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

행운을 빕니다 :)

이 스크립트를 사용할 수 있습니다 . Shift 키를 눌러도 Windows에서는 잘 작동하지만 Mac OS에서는 작동하지 않습니다.

다음은이 페이지의 모든 좋은 아이디어로 구성된 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();
});

자바 스크립트 코드

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

내가 아는 것은 늦었지만, 이것은 다른 누군가에게 도움이 될 수 있습니다.

그래서 여기에 가장 간단한 해결책이 있습니다 (터키어 문자 포함).

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

그래서 나는이 페이지를 찾았고 내가 찾은 솔루션을 정말로 좋아하지 않았으므로 하나를 알아내어 모든 사람에게 제공하고 있습니다. 나를 위해, 내가 문자를 입력하는 경우 뚜껑 잠금이 켜져있는 경우에만 중요합니다. 이 코드는 문제를 해결했습니다. 쉽고 빠르며 필요할 때마다 참조 할 수있는 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;
  }
});

입력 할 때 caplock이 켜져 있으면 현재 문자를 소문자로 자동 변환 할 수 있습니다. 이렇게하면 caplocks가 켜져 있어도 현재 페이지에있는 것처럼 동작하지 않습니다. 사용자에게 알리기 위해 caplocks가 켜져 있지만 양식 항목이 변환되었다는 텍스트를 표시 할 수 있습니다.

캡 잠금을 감지하는 훨씬 간단한 솔루션이 있습니다.

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