Woran erkennt man, ob die Feststelltaste mit JavaScript aktiviert ist?

Woran erkennt man, ob die Feststelltaste mit JavaScript aktiviert ist?

Eine Einschränkung: Ich habe es googelt und die beste Lösung, die ich finden konnte, bestand darin onkeypress, jeder Eingabe ein Ereignis beizufügen und dann jedes Mal zu überprüfen, ob der gedrückte Buchstabe in Großbuchstaben geschrieben war, und zu überprüfen, ob die Umschalttaste auch gedrückt gehalten wurde. Wenn dies nicht der Fall ist, muss die Feststelltaste aktiviert sein. Das fühlt sich wirklich schmutzig und nur ... verschwenderisch an - gibt es doch einen besseren Weg als diesen?

Sie können es versuchen. Ein funktionierendes Beispiel wurde hinzugefügt. Wenn der Fokus auf der Eingabe liegt, wird die LED durch Einschalten der Feststelltaste rot, ansonsten grün. (Nicht auf Mac / Linux getestet)

HINWEIS: Beide Versionen funktionieren für mich. Vielen Dank für konstruktive Eingaben in den Kommentaren.

ALTE VERSION: https://jsbin.com/mahenes/edit?js,output

Auch hier ist eine modifizierte Version (kann jemand auf Mac testen und bestätigen)

NEUE VERSION: https://jsbin.com/xiconuv/edit?js,output

NEUE VERSION:

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

ALTE VERSION:

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

}}

Bei internationalen Zeichen kann bei Bedarf eine zusätzliche Prüfung für die folgenden Schlüssel hinzugefügt werden. Sie müssen den Schlüsselcodebereich für Zeichen ermitteln, an denen Sie interessiert sind. Möglicherweise verwenden Sie ein Keymapping-Array, das alle gültigen Anwendungsfallschlüssel enthält, die Sie ansprechen ...

Großbuchstaben AZ oder 'Ä', 'Ö', 'Ü', Kleinbuchstaben aZ oder 0-9 oder 'ä', 'ö', 'ü'

Die obigen Tasten sind nur Beispieldarstellungen.

In jQuery

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

Vermeiden Sie, dass der Fehler wie die Rücktaste s.toLowerCase() !== sbenötigt wird.

Mit a können Sie KeyboardEventzahlreiche Schlüssel erkennen, einschließlich der Feststelltaste in den neuesten Browsern.

Die getModifierStateFunktion liefert den Status für:

• Alt
• AltGraph
• Feststelltaste
• Steuerung
• Fn (Android)
• Meta
• Num Lock
• Betriebssystem (Windows & Linux)
• ScrollLock
• Verschiebung

Diese Demo funktioniert in allen gängigen Browsern, einschließlich Mobile ( caniuse ).

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

Sie können die Feststelltaste mithilfe von "Großbuchstaben und keine Umschalttaste" mithilfe einer Tastendruckerfassung im Dokument erkennen. Aber dann sollten Sie besser sicher sein, dass kein anderer Tastendruck-Handler die Ereignisblase öffnet, bevor sie den Handler im Dokument erreicht.

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

Sie könnten das Ereignis während der Erfassungsphase in Browsern erfassen, die dies unterstützen, aber es scheint etwas sinnlos zu sein, da es nicht in allen Browsern funktioniert.

Ich kann mir keine andere Möglichkeit vorstellen, den Status der Feststelltaste tatsächlich zu erkennen. Die Überprüfung ist sowieso einfach und wenn nicht erkennbare Zeichen eingegeben wurden, dann war eine Erkennung nicht erforderlich.

Zu diesem letzten Jahr gab es einen Artikel über 24 Möglichkeiten . Ziemlich gut, aber es fehlt internationale Charakterunterstützung (verwenden Sie toUpperCase(), um das zu umgehen).

Viele vorhandene Antworten prüfen, ob die Feststelltaste aktiviert ist, wenn die Umschalttaste nicht gedrückt wird, prüfen jedoch nicht, ob Sie die Umschalttaste drücken und Kleinbuchstaben verwenden, oder prüfen dies, prüfen jedoch nicht, ob die Feststelltaste deaktiviert ist, oder prüfen dies jedoch Nicht-Alpha-Tasten werden als "Aus" betrachtet. Hier ist eine angepasste jQuery-Lösung, die eine Warnung anzeigt, wenn eine Alpha-Taste mit Großbuchstaben gedrückt wird (Umschalt oder keine Umschalttaste), die Warnung ausschaltet, wenn eine Alpha-Taste ohne Großbuchstaben gedrückt wird, die Warnung jedoch nicht aus- oder einschaltet, wenn Zahlen oder andere Tasten werden gedrückt.

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

In JQuery. Dies deckt die Ereignisbehandlung in Firefox ab und sucht nach unerwarteten Groß- und Kleinbuchstaben. Dies setzt ein <input id="password" type="password" name="whatever"/>Element und ein separates Element mit der ID ' capsLockWarning' voraus , die die Warnung enthält, die wir anzeigen möchten (aber ansonsten ausgeblendet ist).

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

Die Top-Antworten hier haben aus mehreren Gründen nicht funktioniert (nicht kommentierter Code mit einem toten Link und einer unvollständigen Lösung). Also habe ich ein paar Stunden damit verbracht, alle auszuprobieren und das Beste zu bekommen, was ich konnte: Hier ist meine, einschließlich jQuery und Nicht-jQuery.

jQuery

Beachten Sie, dass jQuery das Ereignisobjekt normalisiert, sodass einige Überprüfungen fehlen. Ich habe es auch auf alle Passwortfelder eingegrenzt (da dies der Hauptgrund ist, es zu benötigen) und eine Warnmeldung hinzugefügt. Dies wurde in Chrome, Mozilla, Opera und IE6-8 getestet. Stabil und fängt alle Capslock-Zustände ab, AUSSER wenn Zahlen oder Leerzeichen gedrückt werden.

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

Ohne jQuery

Bei einigen anderen jQuery-freien Lösungen fehlten IE-Fallbacks. @ Zappa hat es gepatcht.

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
    }

}

Hinweis: Schauen Sie sich die Lösungen von @Borgar, @Joe Liversedge und @Zappa sowie das von @Pavel Azanov entwickelte Plugin an, das ich nicht ausprobiert habe, aber eine gute Idee ist. Wenn jemand eine Möglichkeit kennt, den Bereich über A-Za-z hinaus zu erweitern, bearbeiten Sie ihn bitte. Außerdem werden jQuery-Versionen dieser Frage als Duplikat geschlossen. Deshalb poste ich beide hier.

Wir verwenden getModifierState, um nach Feststelltaste zu suchen. Es ist nur ein Mitglied eines Maus- oder Tastaturereignisses, daher können wir keine verwenden onfocus. Die gebräuchlichste Art und Weise, wie das Kennwortfeld in den Fokus gerückt wird, ist ein Klick oder eine Registerkarte. Wir verwenden onclick, um innerhalb der Eingabe nach einem Mausklick zu suchen, und verwenden onkeyup, um eine Registerkarte aus dem vorherigen Eingabefeld zu erkennen. Wenn das Kennwortfeld das einzige Feld auf der Seite ist und automatisch fokussiert wird, tritt das Ereignis erst auf, wenn die erste Taste losgelassen wird. Dies ist in Ordnung, aber nicht ideal. Sie möchten wirklich, dass die Tipps für die Feststelltaste angezeigt werden, sobald das Kennwortfeld angezeigt wird Fokus, aber in den meisten Fällen funktioniert diese Lösung wie ein Zauber.

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

Ich weiß, dass dies ein altes Thema ist, dachte aber, ich würde Feedback geben, falls es anderen hilft. Keine der Antworten auf die Frage scheint in IE8 zu funktionieren. Ich habe jedoch diesen Code gefunden, der in IE8 funktioniert. (Havent hat noch nichts unter IE8 getestet). Dies kann bei Bedarf einfach für jQuery geändert werden.

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

Und die Funktion wird über das Ereignis onkeypress folgendermaßen aufgerufen:

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

Dies ist eine Lösung, die neben der Überprüfung des Status beim Schreiben auch die Warnmeldung bei jedem Caps LockDrücken der Taste umschaltet (mit einigen Einschränkungen).

Es werden auch nicht englische Buchstaben außerhalb des AZ-Bereichs unterstützt, da das Zeichenfolgenzeichen mit toUpperCase()und toLowerCase()nicht mit dem Zeichenbereich verglichen wird.

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

Beachten Sie, dass das Umschalten der Feststelltaste nur dann sinnvoll ist, wenn wir den Status der Feststelltaste kennen, bevor die Caps LockTaste gedrückt wird. Der aktuelle Feststelltaste-Status wird mit einer capsJavaScript-Eigenschaft für das Kennwortelement beibehalten . Dies wird festgelegt, wenn wir zum ersten Mal eine Überprüfung des Feststelltaststatus haben, wenn der Benutzer einen Buchstaben drückt, der in Groß- oder Kleinbuchstaben geschrieben werden kann. Wenn das Fenster den Fokus verliert, können wir das Umschalten der Feststelltaste nicht mehr beobachten, sodass wir auf einen unbekannten Zustand zurücksetzen müssen.

Vor kurzem gab es eine ähnliche Frage auf hashcode.com, und ich habe ein jQuery-Plugin erstellt, um damit umzugehen. Es unterstützt auch die Erkennung der Feststelltaste für Zahlen. (Beim deutschen Standard-Tastaturlayout wirkt sich die Feststelltaste auf Zahlen aus).

Sie können die neueste Version hier überprüfen: jquery.capsChecker

Für jQuery mit Twitter Bootstrap

Überprüfen Sie die gesperrten Kappen auf folgende Zeichen:

Großbuchstaben AZ oder 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

Kleinbuchstaben aZ oder 0-9 oder 'ä', 'ö', 'ü', '.', ',', '+', '#'

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

Live-Demo auf jsfiddle

Eine Variable, die den Status der Feststelltaste anzeigt:

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

funktioniert in allen Browsern => canIUse

Diese von @ user110902 gepostete jQuery-basierte Antwort war für mich nützlich. Ich habe es jedoch ein wenig verbessert, um einen Fehler zu vermeiden, der in @B_Ns Kommentar erwähnt wird: CapsLock konnte nicht erkannt werden, während Sie die Umschalttaste drücken:

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

So funktioniert es auch beim Drücken der Umschalttaste.

Dieser Code erkennt die Feststelltaste unabhängig vom Fall oder wenn die Umschalttaste gedrückt wird:

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

Ich habe eine Bibliothek namens capsLock geschrieben die genau das tut, was Sie wollen.

Fügen Sie es einfach auf Ihren Webseiten ein:

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

Verwenden Sie es dann wie folgt:

alert(capsLock.status);

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

Siehe die Demo: http://jsfiddle.net/3EXMd/

Der Status wird aktualisiert, wenn Sie die Feststelltaste drücken. Es wird nur der Umschalttasten-Hack verwendet, um den korrekten Status der Feststelltaste zu ermitteln. Anfangs ist der Status false. Hüte dich.

Noch eine andere Version, klar und einfach, behandelt verschobene Feststelltasten und ist nicht auf ASCII beschränkt, denke ich:

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

Bearbeiten: Sinn von capsLockOn wurde umgekehrt, doh, behoben.

Bearbeiten Nr. 2: Nachdem ich dies noch einmal überprüft habe, habe ich einige Änderungen vorgenommen, leider etwas detaillierteren Code, aber es werden mehr Aktionen entsprechend behandelt.

• Wenn Sie e.charCode anstelle von e.keyCode verwenden und nach 0-Werten suchen, werden viele Tastendrücke ohne Zeichen übersprungen, ohne dass eine bestimmte Sprache oder ein bestimmter Zeichensatz codiert wird. Nach meinem Verständnis ist es etwas weniger kompatibel, sodass sich ältere, nicht zum Mainstream gehörende oder mobile Browser möglicherweise nicht so verhalten, wie dieser Code es erwartet, aber es lohnt sich für meine Situation trotzdem.

• Durch die Überprüfung anhand einer Liste bekannter Interpunktionscodes wird verhindert, dass diese als falsch negativ angesehen werden, da sie nicht von der Feststelltaste betroffen sind. Ohne dies wird die Feststelltaste ausgeblendet, wenn Sie eines dieser Satzzeichen eingeben. Durch Angabe eines ausgeschlossenen Satzes anstelle eines eingeschlossenen Satzes sollte dieser besser mit erweiterten Zeichen kompatibel sein. Dies ist das hässlichste, speziellste Stück, und es besteht die Möglichkeit, dass nicht-westliche Sprachen genügend unterschiedliche Interpunktions- und / oder Interpunktionscodes haben, um ein Problem zu sein, aber es lohnt sich IMO, zumindest für meine Situation.

Reagieren

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

Basierend auf der Antwort von @joshuahedlund, da es für mich gut funktioniert hat.

Ich habe den Code zu einer Funktion gemacht, damit er wiederverwendet werden kann, und ihn in meinem Fall mit dem Körper verknüpft. Es kann nur dann mit dem Passwortfeld verknüpft werden, wenn Sie dies bevorzugen.

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

Die Antwort von Mottie und Diego Vieira oben haben wir letztendlich verwendet und sollte jetzt die akzeptierte Antwort sein. Bevor ich es jedoch bemerkte, schrieb ich diese kleine Javascript-Funktion, die nicht auf Zeichencodes beruht ...

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

Rufen Sie es dann in einem Event-Handler wie diesem auf capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Aber auch hier haben wir nur die Antwort von @Mottie und @Diego Vieira verwendet

In diesem Code wird eine Warnung angezeigt, wenn die Feststelltaste aktiviert ist und sie die Taste mit der Umschalttaste drücken.

wenn wir falsch zurückgeben; dann wird das aktuelle Zeichen nicht an die Textseite angehängt.

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

Probieren Sie diesen einfachen Code in leicht verständlicher Form aus

Dies ist das Skript

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

Und das HTML

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

Versuchen Sie, diesen Code zu verwenden.

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

Viel Glück :)

Sie könnten dieses Skript verwenden . Es sollte unter Windows gut funktionieren, auch wenn die Umschalttaste gedrückt wird, aber unter Mac OS funktioniert es in diesem Fall nicht.

Hier ist ein benutzerdefiniertes JQuery-Plugin, das JQuery UI verwendet und aus all den guten Ideen auf dieser Seite besteht und das Tooltip-Widget nutzt. Die Feststelltaste wird automatisch auf alle Kennwortfelder angewendet und erfordert keine Änderungen an Ihrem aktuellen HTML-Code.

Benutzerdefinierter Plug-In-Code ...

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

Auf alle Passwortelemente anwenden ...

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

Javascript Code

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

Wir müssen dieses Skript jetzt mit HTML verknüpfen

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

Es ist spät, ich weiß, aber das kann jemand anderem hilfreich sein.

Hier ist meine einfachste Lösung (mit türkischen Zeichen).

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

Also habe ich diese Seite gefunden und die Lösungen, die ich gefunden habe, nicht wirklich gemocht, also habe ich eine herausgefunden und biete sie euch allen an. Für mich ist es nur wichtig, ob die Feststelltaste aktiviert ist, wenn ich Buchstaben schreibe. Dieser Code hat das Problem für mich gelöst. Es ist schnell und einfach und bietet Ihnen eine capsIsOn-Variable, auf die Sie bei Bedarf jederzeit verweisen können.

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

Wenn Sie tippen und caplock aktiviert ist, wird das aktuelle Zeichen automatisch in Kleinbuchstaben umgewandelt. Selbst wenn Caplocks aktiviert ist, verhält es sich auf diese Weise nicht wie auf der aktuellen Seite. Um Ihre Benutzer zu informieren, können Sie einen Text anzeigen, der besagt, dass Caplocks aktiviert ist, die Formulareinträge jedoch konvertiert werden.

Es gibt eine viel einfachere Lösung zum Erkennen der Feststelltaste:

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