web-dev-qa-db-de.com

Wie können Sie feststellen, ob die Feststelltaste mit JavaScript aktiviert ist?

Wie können Sie feststellen, ob die Feststelltaste mit JavaScript aktiviert ist?

Ein Nachteil: Ich habe es google und die beste Lösung, die ich finden konnte, war, an jede Eingabe ein onkeypress-Ereignis anzuhängen, und jedes Mal zu überprüfen, ob der gedrückte Buchstabe Großbuchstaben war. Wenn dies der Fall war, dann prüfen, ob auch die Schicht gedrückt wurde. Wenn dies nicht der Fall ist, muss die Feststelltaste aktiviert sein. Das fühlt sich wirklich schmutzig an und nur ... verschwenderisch - es gibt doch einen besseren Weg als diesen?

javascriptkeyboardcapslock
221
nickf

Fand das interessant .... Sie können es versuchen.

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;

}

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

großbuchstaben A-Z oder 'Ä', 'Ö', 'Ü', Kleinbuchstaben A-Z oder 0-9 oder 'Ä', 'Ö', 'Ü'

Die obigen Tasten sind nur Beispieldarstellungen.

91
rajesh pillai

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 den Fehler, wie zum Beispiel die Rücktaste, s.toLowerCase() !== s.

132
user110902

Sie können eine KeyboardEvent verwenden, um zahlreiche Schlüssel zu erkennen, einschließlich der Feststelltaste für die meisten aktuellen Browser.

Die Funktion getModifierState 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 mobil ( caniuse ).

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

Sie können die Feststelltaste erkennen, indem Sie "Großbuchstaben und keine gedrückte Umschalttaste" verwenden, indem Sie eine Tastendruckerfassung im Dokument verwenden. Dann sollten Sie jedoch sicher sein, dass kein anderer Keypress-Handler die Ereignisblase öffnet, bevor er an den Handler im Dokument gelangt.

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önnen das Ereignis während der Erfassungsphase in Browsern mitnehmen, die das 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 Caps-Lock-Status zu erkennen. Die Überprüfung ist trotzdem einfach und wenn nicht erkennbare Zeichen eingegeben wurden, nun ja, dann war das Erkennen nicht notwendig.

Es gab einen Artikel über 24 Wege zu diesem letzten Jahr. Ziemlich gut, aber es fehlt die Unterstützung internationaler Zeichen (verwenden Sie toUpperCase(), um dies zu umgehen).

23
Borgar

Viele vorhandene Antworten prüfen, ob die Feststelltaste aktiviert ist, wenn die Schicht nicht gedrückt wird. Sie prüfen jedoch nicht, ob Sie die Umschalttaste gedrückt haben und Kleinbuchstaben erhalten. Sie werden auch geprüft, ob die Feststelltaste deaktiviert ist Nicht-Alpha-Schlüssel 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 (Shift oder No Shift), die Warnung abschaltet, wenn eine Alpha-Taste ohne Großbuchstaben gedrückt wird Nummern 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)
  });
11
joshuahedlund

In JQuery. Dies behandelt die Ereignisbehandlung in Firefox und prüft auf unerwartete Groß- und Kleinbuchstaben. Dies setzt ein <input id="password" type="password" name="whatever"/>element und ein separates Element mit der ID 'capsLockWarning' voraus, das die Warnung enthält, die wir anzeigen möchten (aber sonst 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();
    }
});
11
Joe Liversedge

Die Top-Antworten hier haben aus mehreren Gründen nicht funktioniert (unkommentierter Code mit einem toten Link und einer unvollständigen Lösung). Also habe ich ein paar Stunden damit verbracht, alle auszuprobieren und das Beste herauszuholen, was ich konnte: hier ist meins, 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 Kennwortfelder eingegrenzt (da dies der größte Grund ist, es zu benötigen) und eine Warnmeldung hinzugefügt. Dies wurde in Chrome, Mozilla, Opera und IE6-8 getestet. Stabil und erfasst alle Capslock-Zustände, 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 anderen Lösungen ohne jQuery 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 einen Weg kennt, den Geltungsbereich über A-Za-Z hinaus zu erweitern, bearbeiten Sie ihn bitte. Auch jQuery-Versionen dieser Frage sind als Duplikate geschlossen, deshalb poste ich beide hier.

6
D_N

Ich weiß, dass dies ein altes Thema ist, aber ich dachte, ich würde zurückkehren, falls es anderen hilft. Keine der Antworten auf die Frage scheint in IE8 zu funktionieren. Ich habe diesen Code jedoch gefunden, der in IE8 funktioniert. (Havent hat noch nichts unter IE8 getestet). Dies kann bei Bedarf leicht 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';
}

Die Funktion wird über das Ereignis onkeypress wie folgt aufgerufen:

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

Dies ist eine Lösung, bei der zusätzlich zur Statusprüfung beim Schreiben jedes Mal die Warnmeldung umgeschaltet wird Caps Lock Taste gedrückt (mit einigen Einschränkungen).

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

$(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 sinnvoll ist, wenn Sie den Status der Feststelltaste vor dem kennen Caps Lock Taste wird gedrückt. Der aktuelle Status der Feststelltaste wird mit einer JavaScript-Eigenschaft caps für das Kennwortelement beibehalten. Dies wird festgelegt, wenn zum ersten Mal der Feststellstatus überprüft wird, wenn der Benutzer einen Buchstaben in Groß- oder Kleinschreibung drückt. Wenn das Fenster den Fokus verliert, können wir das Umschalten der Feststelltaste nicht mehr beobachten. Daher müssen wir auf einen unbekannten Status zurücksetzen.

5
awe

Wir verwenden getModifierState, um die Feststelltaste zu prüfen. Dies ist nur ein Mitglied eines Maus- oder Tastaturereignisses. Daher können wir keine onfocus verwenden. Die gebräuchlichsten zwei Möglichkeiten, mit denen das Kennwortfeld den Fokus erhält, sind das Klicken in oder die Registerkarte. Wir verwenden onclick, um nach einem Mausklick in der Eingabe zu suchen, und wir verwenden onkeyup, um eine Registerkarte aus dem vorherigen Eingabefeld zu ermitteln. Wenn das Kennwortfeld das einzige Feld auf der Seite ist und automatisch fokussiert wird, wird das Ereignis erst nach dem Loslassen des ersten Schlüssels ausgeführt. Dies ist zwar in Ordnung, aber nicht ideal. In diesem Fall sollten die Tooltipps für die Feststelltaste angezeigt werden, sobald das Kennwortfeld angezeigt wird Fokus, aber für die meisten Fälle 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

4
Ryan Marin

Eine Variable, die den Caps-Lock-Status 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 auf allen Browsern => canIUse

3
Alice Rocheman

Für jQuery mit Twitter-Bootstrap

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

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

kleinbuchstaben a-Z 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

3
ramiz4

Kürzlich 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. (Bei der Standardtastatur der deutschen Tastatur wirkt sich die Feststelltaste auf Zahlen aus).

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

3
Pavel Azanov

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');
    }
});
2
formixian

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;
            }
        }
    }
2
José Araújo

Noch eine andere Version, klar und einfach, handhabt CapsLock 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];

Edit: Die Wahrnehmung von capsLockOn wurde rückgängig gemacht, doh, behoben.

Edit # 2: Nachdem ich mir das noch etwas genauer angeschaut habe, habe ich ein paar Änderungen vorgenommen, leider etwas detaillierteren Code, aber er behandelt mehr Aktionen entsprechend.

  • Wenn Sie e.charCode anstelle von e.keyCode verwenden und nach 0-Werten suchen, werden viele Tastendrucke ohne Zeichen übersprungen, ohne etwas zu codieren, das für eine bestimmte Sprache oder einen bestimmten Zeichensatz spezifisch ist. Soweit ich weiß, ist es etwas weniger kompatibel, daher verhalten sich ältere, Nicht-Mainstream- oder mobile Browser möglicherweise nicht wie erwartet, aber es lohnt sich für meine Situation trotzdem.

  • Durch das Vergleichen mit einer Liste bekannter Interpunktionscodes wird verhindert, dass sie als falsch negativ eingestuft werden, da sie nicht von der Feststelltaste betroffen sind. Andernfalls wird die Feststelltaste gesperrt, wenn Sie eines dieser Interpunktionszeichen eingeben. Durch Angabe eines ausgeschlossenen Satzes und nicht eines eingeschlossenen Satzes sollte dieser mit erweiterten Zeichen besser kompatibel sein. Dies ist das hässlichste und speziellste Beispiel, und es besteht die Möglichkeit, dass nicht-westliche Sprachen unterschiedliche Interpunktions- und/oder Interpunktionscodes verwenden, um ein Problem zu sein, aber es lohnt sich IMO zumindest für meine Situation.

2
enigment

Ich habe eine Bibliothek namens capsLock geschrieben, die genau das tut, was Sie möchten.

Fügen Sie es einfach in Ihre Webseiten ein:

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

Dann verwenden Sie es 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 verwendet nur den Shift-Tasten-Hack, um den korrekten Status der Feststelltaste zu ermitteln. Anfangs ist der Status false. Hüte dich.

2
Aadit M Shah

Diese jQuery-basierte Antwort gepostet von @ user110902 war für mich hilfreich. Ich habe es jedoch etwas verbessert, um einen Fehler zu vermeiden, der in @B_Ns Kommentar erwähnt wurde: CapsLock konnte nicht erkannt werden, wenn 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, wenn Sie die Umschalttaste drücken.

2
SebasSBM

Motties und Diego Vieiras- Antwort - haben wir am Ende verwendet und sollten jetzt die akzeptierte Antwort sein. Bevor ich es bemerkte, habe ich diese kleine Javascript-Funktion geschrieben, die sich nicht auf Zeichencodes stützt ...

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

Dann rufen Sie es in einem Event-Handler wie folgt auf: capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Aber wieder haben wir nur @Motties und @Diego Vieiras Antwort verwendet

1
Chris

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

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

<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>
1
Cedric Simon

es ist spät, weiß ich, aber das kann jemand anderen helfen. 

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

In diesem Code wird der Alarm angezeigt, wenn die Feststelltaste aktiviert ist, und die Taste wird mit der Umschalttaste gedrückt. 

wenn wir falsch zurückkommen; 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;
    }
});
0
Naga Harish M

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>
0
sourabh kasliwal

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 nun mithilfe von Html verknüpfen 

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

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

0
Horia Rudan

Hier ist ein benutzerdefiniertes Jquery-Plugin, das Jquery Ui verwendet und aus allen guten Ideen auf dieser Seite besteht. Die Caps-Lock-Nachricht wird automatisch auf alle Kennwortfelder angewendet und erfordert keine Änderungen an Ihrer aktuellen HTML-Datei. 

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 Kennwortelemente anwenden ...

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

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

0
Oday Fraiwan

Ich habe diese Seite gefunden und die Lösungen, die ich gefunden habe, nicht wirklich gemocht, also habe ich eine gefunden und biete sie allen an. Für mich ist es nur wichtig, wenn die Feststelltaste aktiviert ist, wenn ich Buchstaben eingebe. Dieser Code hat das Problem für mich gelöst. Es ist schnell und einfach und gibt Ihnen eine capsIsOn-Variable als Referenz, wann immer Sie sie benötigen.

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

0
Mike Sraj