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

https://stackoverflow.com/questions/348792

20-08-2019
|

문제

그래도 한 가지주의 사항 : 나는 Google을 만들었고 내가 찾을 수있는 가장 좋은 솔루션은 onkeypress 모든 입력에 대한 이벤트를 한 다음 누적 된 문자가 대문자인지마다 확인한 다음, 여정이 고정되었는지 확인하십시오. 그렇지 않은 경우 캡 잠금 장치가 켜져 있어야합니다. 이것은 정말 더럽고 그냥 ... 낭비 - 분명히 이것보다 더 좋은 방법이 있습니까?

해결책

이 흥미로운 것을 발견했습니다 .... 당신은 그것을 시도 할 수 있습니다 ..

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;

}

국제 캐릭터의 경우 필요에 따라 다음 키에 대한 추가 확인을 추가 할 수 있습니다. 관심있는 문자의 키 코드 범위를 가져와야합니다. 주소를 다루고있는 모든 유효한 유스 케이스 키를 보유하는 Keymapping Array를 사용하는 것일 수 있습니다.

대문자 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 필요합니다.

당신은 a를 사용할 수 있습니다 KeyboardEvent 최신 브라우저의 캡 잠금 장치를 포함한 수많은 키를 감지합니다.

그만큼 getModifierState 기능 주를 제공합니다.

대체
altgraph
캡슐
제어
FN (Android)
메타
Num 잠금
OS (Windows & Linux)
스크롤 잠금
옮기다

이 데모 모바일을 포함한 모든 주요 브라우저에서 작동합니다 (사용해도 되나요).

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

문서의 키 프레스 캡처를 사용하여 "IS 문자 대문자 및 시프트가 없음"을 사용하여 캡 잠금을 감지 할 수 있습니다. 그러나 문서의 핸들러에 도착하기 전에 다른 Keypress 핸들러가 이벤트 버블을 터뜨리지 않도록하는 것이 좋습니다.

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

이를 지원하는 브라우저에서 캡처 단계에서 이벤트를 잡을 수 있지만 모든 브라우저에서 작동하지 않기 때문에 다소 무의미 해 보입니다.

실제로 캡 잠금 상태를 감지하는 다른 방법을 생각할 수 없습니다. 어쨌든 수표는 간단하고 감지 할 수없는 문자가 입력되면 잘 ... 탐지가 필요하지 않았습니다.

거기있었습니다 24 가지 방법에 대한 기사 작년에. 꽤 좋지만 국제 캐릭터 지원이 부족합니다 (사용 toUpperCase() 그 주위를 돌아 다니기 위해).

기존의 많은 답변은 시프트가 눌리지 않으면 캡 잠금을 점검하지만 시프트를 누르고 소문자를 눌러서 확인하지 않거나이를 확인하거나이를 확인하지만 캡 잠금 장치가 꺼져 있는지 확인하지 않습니다. 비 알파 키를 'OFF'로 간주합니다. 다음은 알파 키가 캡으로 눌려지면 경고를 표시하는 적응 된 jQuery 솔루션입니다 (Shift 또는 Shift 없음). 알파 키가 캡없이 눌러지면 경고를 끄지 않으면 경고를 끄지 않으면 경고를 끕니다. 숫자 또는 기타 키가 누릅니다.

$("#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에서 테스트되었습니다. 숫자 또는 공간을 누르는 경우를 제외한 모든 캡슐 상태를 안정시키고 잡습니다.

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

나는 이것이 오래된 주제라는 것을 알고 있지만 다른 사람들을 돕는 경우를 대비하여 피드백 할 것이라고 생각했습니다. 질문에 대한 답은 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>

이것은 쓸 때 상태를 확인하는 것 외에도 매번 경고 메시지를 전환하는 솔루션입니다. 캡 잠금 키가 누적됩니다 (일부 제한 사항).

또한 문자열 문자를 확인하기 때문에 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>

캡 잠금 토글을 관찰하는 관찰은 우리가 캡 잠금 상태를 알고있는 경우에만 유용합니다. 캡 잠금 키가 눌렀습니다. 현재 캡 잠금 상태는 a caps 비밀번호 요소의 JavaScript 속성. 사용자가 상류 또는 소문자 일 수있는 문자를 누를 때 Caps Lock 상태의 검증이 처음으로 설정됩니다. 창이 초점을 잃으면 더 이상 캡 잠금 토글을 관찰 할 수 없으므로 알 수없는 상태로 재설정해야합니다.

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

HTML

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

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

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

최근에 비슷한 질문 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의 라이브 데모

캡 잠금 상태를 보여주는 변수 :

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

모든 브라우저에서 작동합니다 => 사용해도 되나요

이 코드는 케이스에 관계없이 캡 잠금을 감지하거나 시프트 키를 누르면 다음을 감지합니다.

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

나는라는 도서관을 썼다 캡슐 당신이 원하는 것을 정확히 수행합니다.

웹 페이지에 포함 시키십시오.

<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 잠금 키의 올바른 상태를 결정하기 위해 Shift 키 해킹 만 사용합니다. 처음에 상태는입니다 false. 그러니 조심하십시오.

명확하고 단순한 또 다른 버전은 이동 된 캡슐을 처리하고 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 잠금의 영향을받지 않기 때문에 잘못된 부정적인 것으로 보이지 않습니다. 이 없으면 캡스 잠금 지표가 해당 구두점 문자를 입력하면 숨겨집니다. 포함 된 세트가 아니라 제외 된 세트를 지정하면 확장 문자와 더 호환됩니다. 이것은 가장 추악하고 특별한 비트이며, 비 서구 언어가 충분히 다른 구두점 및/또는 구두점 코드를 가질 가능성이 있지만 적어도 내 상황에는 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;
            }
        }
    }

이 jQuery 기반 답변 @user110902에 의해 게시 된 것은 나에게 유용했다. 그러나 @B_N의 의견에 언급 된 결함을 방지하기 위해 조금 개선했습니다. Shift를 누르는 동안 캡슐을 감지하는 데 실패했습니다.

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

이와 마찬가지로, 그것은 시프트를 누르면서도 작동합니다.

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

모티 그리고 Diego Vieira 's 응답 위는 우리가 결국 사용했으며 지금 받아 들여진 답변이되어야합니다. 그러나, 그것을 알아 차리기 전에, 나는 문자 코드에 의존하지 않는이 작은 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의 응답을 사용했습니다.

이 아래 코드에서는 캡이 잠그고 Shift를 사용하여 키를 누르면 경고가 표시됩니다.

우리가 거짓을 반환하면; 그런 다음 현재 Char가 텍스트 페이지에 추가되지 않습니다.

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

그래서 나는이 페이지를 찾았고 내가 찾은 솔루션을 실제로 좋아하지 않았기 때문에 하나를 알아 내고 여러분 모두에게 제공하고 있습니다. 저에게는 캡 잠금 장치가 켜져있는 경우에만 중요합니다. 이 코드는 나에게 문제를 해결했습니다. 빠르고 쉽고 필요할 때마다 참조 할 캡슨 변수를 제공합니다.

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

입력하면 캡클이 켜져 있으면 현재 숯을 자동으로 변환 할 수 있습니다. 그렇게하면 캡클이 켜져 있더라도 현재 페이지에서 작동하지 않습니다. 사용자에게 알리기 위해 Caplocks가 켜져 있지만 양식 항목이 변환된다는 텍스트를 표시 할 수 있습니다.

Caps-Lock을 감지하기위한 훨씬 간단한 솔루션이 있습니다.

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

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow