Skąd wiesz, czy Caps Lock korzysta z JavaScript?

Skąd wiesz, czy Caps Lock korzysta z JavaScript?

Jedno zastrzeżenie: zrobiłem to w Google, a najlepszym rozwiązaniem, jakie mogłem znaleźć, było dołączenie onkeypresszdarzenia do każdego wpisu, a następnie sprawdzanie za każdym razem, czy naciśnięta litera jest pisana wielkimi literami, a jeśli tak, to sprawdź, czy shift również został przytrzymany. Jeśli tak nie było, to musi być włączony Caps Lock. To jest naprawdę brudne i po prostu ... marnotrawstwo - z pewnością istnieje lepszy sposób niż ten?

Możesz spróbować. Dodano działający przykład. Gdy fokus jest ustawiony na wejściu, włączenie blokady Caps powoduje, że dioda LED zmienia kolor na czerwony, w przeciwnym razie zielony. (Nie testowałem na Macu / Linuksie)

UWAGA: Obie wersje działają dla mnie. Dzięki za konstruktywne uwagi w komentarzach.

STARE WERSJA: https://jsbin.com/mahenes/edit?js,output

Również tutaj jest zmodyfikowana wersja (czy ktoś może przetestować na Macu i potwierdzić)

NOWA WERSJA: https://jsbin.com/xiconuv/edit?js,output

NOWA WERSJA:

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

STARA WERSJA:

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

}

W przypadku znaków międzynarodowych można w razie potrzeby dodać dodatkowe sprawdzenie dla następujących kluczy. Musisz uzyskać zakres kodów dla interesujących Cię znaków, może być to za pomocą tablicy mapowania klawiszy, która przechowuje wszystkie prawidłowe klucze przypadków użycia, do których się adresujesz ...

wielkie litery AZ lub „Ę”, „Ö”, „Ü”, małe litery aZ lub 0-9 lub „ä”, „ö”, „ü”

Powyższe klucze są tylko przykładową reprezentacją.

W jQuery

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

Unikaj błędu, jak s.toLowerCase() !== spotrzebny jest klawisz Backspace .

Możesz użyć a, KeyboardEventaby wykryć wiele kluczy, w tym Caps Lock w najnowszych przeglądarkach.

getModifierStateFunkcja zapewni stan na:

• Alt
• AltGraph
• Duże litery
• Kontrola
• Fn (Android)
• Meta
• NumLock
• System operacyjny (Windows i Linux)
• ScrollLock
• Zmiana

To demo działa we wszystkich głównych przeglądarkach, w tym na urządzeniach mobilnych ( caniuse ).

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

Za pomocą polecenia „przechwytywanie naciśnięcia klawisza” w dokumencie można wykryć blokadę klawiszy za pomocą „wielkiej litery i żadnego naciśnięcia klawisza shift”. Ale lepiej upewnij się, że żaden inny moduł obsługi naciśnięć klawiszy nie wyskakuje z bąbla zdarzeń, zanim dotrze on do modułu obsługi w dokumencie.

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

Możesz wziąć to wydarzenie w fazie przechwytywania w przeglądarkach, które to obsługują, ale wydaje się to trochę bezcelowe, ponieważ nie będzie działać na wszystkich przeglądarkach.

Nie mogę wymyślić żadnego innego sposobu faktycznego wykrycia statusu Caps Lock. Sprawdzenie jest zresztą proste i jeśli wpisano niewykrywalne znaki, cóż ... wykrycie nie było konieczne.

W ubiegłym roku był artykuł o 24 sposobach . Całkiem dobrze, ale brakuje mu wsparcia dla postaci międzynarodowych (użyj, toUpperCase()aby obejść ten problem).

Wiele istniejących odpowiedzi sprawdzi, czy klawisz Caps jest włączony, gdy klawisz Shift nie jest wciśnięty, ale nie sprawdzi go, jeśli naciśniesz Shift i dostaniesz małe litery, lub sprawdzi to, ale nie sprawdzi również, czy Caps Lock jest wyłączony, lub sprawdzi to, ale będzie traktować klucze inne niż alfa jako „wyłączone”. Oto zaadaptowane rozwiązanie jQuery, które wyświetli ostrzeżenie, jeśli klawisz alfa zostanie naciśnięty z klawiszami Cap (Shift lub No Shift), wyłączy ostrzeżenie, jeśli klawisz alfa zostanie naciśnięty bez Caps, ale nie wyłączy ostrzeżenia, gdy cyfry lub inne klawisze są wciśnięte.

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

W JQuery. Obejmuje to obsługę zdarzeń w Firefoksie i sprawdzi zarówno nieoczekiwane wielkie i małe litery. Zakłada to <input id="password" type="password" name="whatever"/>element i oddzielny element o id ' capsLockWarning', który ma ostrzeżenie, które chcemy pokazać (ale jest ukryty inaczej).

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

Najważniejsze odpowiedzi tutaj nie działały dla mnie z kilku powodów (bez komentarza kod z martwym linkiem i niekompletnym rozwiązaniem). Spędziłem więc kilka godzin, próbując wyjść z domu i jak najlepiej: oto moje, w tym jQuery i nie-jQuery.

jQuery

Zauważ, że jQuery normalizuje obiekt zdarzenia, więc brakuje niektórych sprawdzeń. Zawęziłem go również do wszystkich pól haseł (ponieważ jest to największy powód, aby go potrzebować) i dodałem komunikat ostrzegawczy. Zostało to przetestowane w Chrome, Mozilli, Operze i IE6-8. Stabilny i wychwytuje wszystkie stany kapsla Z WYJĄTKIEM, gdy naciśnięte są cyfry lub spacje.

/* 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>");

Bez jQuery

W niektórych innych rozwiązaniach bez jQuery brakowało awarii IE. @Zappa załatał to.

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
    }

}

Uwaga: Sprawdź rozwiązania @Borgar, @Joe Liversedge i @Zappa oraz wtyczkę opracowaną przez @Pavel Azanov, której nie próbowałem, ale jest dobrym pomysłem. Jeśli ktoś zna sposób na rozszerzenie zakresu poza A-Za-z, prosimy o edycję. Również wersje tego pytania do jQuery są zamknięte jako duplikaty, dlatego zamieszczam oba tutaj.

Używamy getModifierStatedo sprawdzania Caps Lock, jest to tylko zdarzenie myszy lub klawiatury, więc nie możemy użyć onfocus. Najczęstsze dwa sposoby na skupienie się na polu hasła to kliknięcie lub karta. Używamy, onclickaby sprawdzić kliknięcie myszą w danych wejściowych i używamy onkeyupdo wykrycia karty z poprzedniego pola wejściowego. Jeśli pole hasła jest jedynym polem na stronie i jest automatycznie ustawiane, to zdarzenie nie nastąpi, dopóki pierwszy klucz nie zostanie zwolniony, co jest w porządku, ale nie jest idealne, naprawdę chcesz, aby wskazówki narzędzia Caps Lock były wyświetlane po uzyskaniu pola hasła skup się, ale w większości przypadków to rozwiązanie działa jak urok.

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

Wiem, że to stary temat, ale pomyślałem, że wrócę na wypadek, gdyby pomógł innym. Żadna z odpowiedzi na pytanie wydaje się nie działać w IE8. Znalazłem jednak ten kod, który działa w IE8. (Nie testowałem jeszcze niczego poniżej IE8). W razie potrzeby można to łatwo zmienić w 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';
}

Funkcja jest wywoływana przez zdarzenie onkeypress w następujący sposób:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

Jest to rozwiązanie, które oprócz sprawdzania stanu podczas pisania przełącza również komunikat ostrzegawczy za każdym Caps Locknaciśnięciem klawisza (z pewnymi ograniczeniami).

Obsługuje również litery inne niż angielskie spoza zakresu AZ, ponieważ sprawdza znak ciągu przeciw toUpperCase()i toLowerCase()zamiast sprawdzania względem zakresu znaków.

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

Zauważ, że obserwowanie przełączania się na Caps Locka jest użyteczne tylko wtedy, gdy znamy stan Caps Locka przed Caps Locknaciśnięciem klawisza. Bieżący stan blokady wielkich liter jest utrzymywany za pomocą capswłaściwości JavaScript elementu hasła. Jest to ustawiane przy pierwszym sprawdzeniu stanu Caps Lock, gdy użytkownik naciśnie literę, która może być wielka lub mała. Jeśli okno przestanie być aktywne, nie będziemy już mogli obserwować przełączania się na klawisz Caps, więc musimy zresetować do nieznanego stanu.

Ostatnio na hashcode.com pojawiło się podobne pytanie i stworzyłem wtyczkę jQuery, aby sobie z tym poradzić. Obsługuje również rozpoznawanie Caps Lock na liczbach. (Na standardowym niemieckim układzie klawiatury blokada klawiszy ma wpływ na liczby).

Możesz sprawdzić najnowszą wersję tutaj: jquery.capsChecker

Do jQuery z twitterowym ładowaniem

Sprawdź, czy wielkie litery są zablokowane dla następujących znaków:

wielkie litery AZ lub „Ę”, „Ö”, „Ü”, „!”, ”„ ”,„ § ”,„ $ ”,„% ”,„ & ”,„ / ”,„ (”,„) ” , '=', ':', ';', '*', '' '

małe litery aZ lub 0-9 lub „ä”, „ö”, „ü”, „.”, „,”, „+”, „#”

/* 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>");

demo na żywo na jsfiddle

Zmienna pokazująca stan 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;
});

działa na wszystkich przeglądarkach => canIUse

Ta odpowiedź oparta na jQuery opublikowana przez @ user110902 była dla mnie przydatna. Jednak poprawiłem go trochę, aby zapobiec usterce wspomnianej w komentarzu @B_N: nie udało się wykryć CapsLock podczas naciskania 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');
    }
});

W ten sposób będzie działać nawet po naciśnięciu klawisza Shift.

Ten kod wykrywa Caps Lock niezależnie od przypadku lub po naciśnięciu klawisza 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');
    }
});

Napisałem bibliotekę o nazwie capsLock, która robi dokładnie to, co chcesz.

Po prostu umieść go na swoich stronach internetowych:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Następnie użyj go w następujący sposób:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

Zobacz demo: http://jsfiddle.net/3EXMd/

Status jest aktualizowany po naciśnięciu klawisza Caps Lock. Używa tylko klawisza Shift, aby określić poprawny status klawisza Caps Lock. Początkowo status to false. Więc uważaj.

Jeszcze inna wersja, przejrzysta i prosta, obsługuje przesunięte czapki Lock, i nie jest ograniczona do ascii, myślę:

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

Edycja: Poczucie capsLockOn zostało odwrócone, doh, naprawione.

Edycja nr 2: Po sprawdzeniu tego jeszcze trochę, wprowadziłem kilka zmian, nieco bardziej szczegółowy kod, niestety, ale odpowiednio obsługuje więcej akcji.

• Użycie e.charCode zamiast e.keyCode i sprawdzenie wartości 0 pomija wiele naciśnięć znaków innych niż znaki, bez kodowania czegokolwiek konkretnego dla danego języka lub zestawu znaków. Z mojego zrozumienia, jest nieco mniej kompatybilny, więc starsze, niemainstreamowe lub mobilne przeglądarki mogą nie zachowywać się tak, jak tego oczekuje kod, ale i tak warto, w mojej sytuacji.

• Sprawdzanie na liście znanych kodów interpunkcyjnych zapobiega ich postrzeganiu jako fałszywych negatywów, ponieważ nie ma na nich wpływu Caps Lock. Bez tego wskaźnik Caps Lock zostaje ukryty po wpisaniu dowolnego z tych znaków interpunkcyjnych. Określając zestaw wykluczony, a nie dołączony, powinien być bardziej kompatybilny z rozszerzonymi znakami. Jest to najbrzydszy, szczególnie kasowy bit, i istnieje szansa, że ​​języki inne niż zachodnie mają wystarczająco różne kody interpunkcyjne i / lub interpunkcyjne, aby stanowić problem, ale znowu warto IMO, przynajmniej w mojej sytuacji.

Reagować

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

Na podstawie odpowiedzi @joshuahedlund, ponieważ działało to dla mnie dobrze.

Uczyniłem kod funkcją, aby można go było ponownie użyć i w moim przypadku połączyłem go z ciałem. Można go połączyć z polem hasła tylko, jeśli wolisz.

<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 za and Diego Vieira odpowiedź powyżej jest to, co skończyło się i powinna być akceptowana odpowiedź teraz. Jednak zanim to zauważyłem, napisałem tę małą funkcję javascript, która nie opiera się na kodach znaków ...

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

Następnie wywołaj go w takiej procedurze obsługi zdarzeń capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Ale znów skończyło się na tym, że użyliśmy odpowiedzi @Mottie si @Diego Vieira

W poniższym kodzie wyświetli się alert, gdy Caps Lock się włączy i naciśnie klawisz Shift.

jeśli zwrócimy fałsz; wówczas obecny znak nie będzie dołączany do strony tekstowej.

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

wypróbuj ten prosty kod w łatwy do zrozumienia

To jest skrypt

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

I HTML

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 

spróbuj użyć tego kodu.

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

Powodzenia :)

Możesz użyć tego skryptu . Powinien działać dobrze w systemie Windows, nawet jeśli zostanie naciśnięty klawisz Shift, ale nie będzie działać w systemie Mac OS, jeśli tak jest.

Oto niestandardowa wtyczka jquery, wykorzystująca interfejs jquery, składająca się ze wszystkich dobrych pomysłów na tej stronie i wykorzystująca widżet podpowiedzi. Wiadomość Caps Lock jest automatycznie stosowana do wszystkich pól haseł i nie wymaga zmian w bieżącym pliku HTML.

Niestandardowy kod wtyczki ...

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

Zastosuj do wszystkich elementów hasła ...

$(function () {
    $(":password").capsLockAlert();
});

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

Teraz musimy powiązać ten skrypt za pomocą HTML

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

wiem, że jest późno, ale może to być pomocne dla kogoś innego.

oto moje najprostsze rozwiązanie (z tureckimi znakami);

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

Znalazłem więc tę stronę i nie podobały mi się znalezione rozwiązania, więc wymyśliłem jedno i oferuję je wszystkim. Dla mnie ważne jest tylko, czy włączona jest funkcja Caps Lock, jeśli piszę litery. Ten kod rozwiązał dla mnie problem. Jest szybki i łatwy i daje ci zmienną capsIsOn, do której możesz się odwoływać, gdy jej potrzebujesz.

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

Po wpisaniu, jeśli włączona jest funkcja caplock, może automatycznie przekonwertować bieżący znak na małe litery. W ten sposób nawet jeśli włączone są blokady, nie będzie się zachowywać tak, jak na bieżącej stronie. Aby poinformować użytkowników, możesz wyświetlić tekst informujący, że włączone są blokady, ale wpisy formularzy są konwertowane.

Istnieje znacznie prostsze rozwiązanie do wykrywania caps-lock:

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