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

JAVASCRIPT / 글쓴이

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 버전은 중복으로 닫혀 있으므로 여기에 두 가지 모두 게시하고 있습니다.