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

242

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?

nickf
quelle
198
WEIL ZU VIELE MEINER BENUTZER IHRE FORMEN AUSFÜLLEN.
Nickf
7
@nicf: Wenn das der Grund ist, warum führen Sie dann keinen regulären Ausdruck für die Eingabe aus und bitten sie, nicht mehr zu schreien, wenn zu viele Großbuchstaben vorhanden sind?
einige
155
Es gibt einen viel besseren Grund dafür. Wenn ein Benutzer ein Passwort eingibt, ist es sehr nützlich, ihn zu warnen, wenn die Feststelltaste aktiviert ist.
T Nguyen
23
Scheint , wie Browser sollte ein „Caps Lock ist auf“ Warnung , wenn die Benutzer - Typ in implementieren input type=passwordFelder (ähnlich E - Mail - Adresse Validierung input type=emailin Chrom, etc.)
nothingisnecessary
8
Ausgezeichnete Frage, aber die akzeptierte Antwort ist 8 Jahre alt. Die bessere Antwort ist hier
Mac

Antworten:

95

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.

Rajesh Pillai
quelle
1
Es ist möglicherweise nicht die beste Implementierung, aber als ich es schrieb, habe ich versucht, es einfach zu halten. Ich denke, der einzige Weg, wie Sie es wirklich mit der Gemeinheit tun können, die Sie für verschiedene Browser benötigen.
2
Ich habe festgestellt, dass bei Verwendung von Keydown (in Chrom) alle Codes als Großbuchstaben erfasst werden. Wenn ich einen Tastendruck benutze, funktioniert es.
Tim
2
Das Finden jeder möglichen Zeichenkombination für alle internationalen Zeichen ist dazu verdammt, einige Fälle zu verpassen. Verwenden Sie stattdessen die Groß- / Kleinschreibung, um das Gehäuse zu überprüfen.
Ehrfurcht
3
Überraschend, dass eine völlig falsche Antwort - verwirrende Zeichen und ASCII (!!!) - so viel Aufsehen erregen kann. Niemand hat jemals nachgesehen ???
GameAlchemist
1
Beachten Sie, dass laut Mozilla event.which aus den Webstandards entfernt wurde.
Verismus
130

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.

user110902
quelle
5
Eigentlich ... vonCharCode musste ich nicht einmal mehr nachsehen. Es sollte jedoch beachtet werden, dass Keydown und Tastendruck unterschiedliche Zeichencodes ergeben, was der Punkt war, an dem ich überhaupt einen Fehler gemacht habe.
Shea
4
-1 v. Chr. Funktioniert dies NUR, wenn sie bei eingeschaltetem CAPS nicht die Umschalttaste gedrückt haben.
1
Wenn jemand ein Live-Beispiel mit Bootstrap sehen möchte, so können Sie hier bootply.com/91792
Govinda Rajbhar
Diese Antwort war nützlich für mich. Ich habe die Bedingung in dieser Antwort aufgrund des von @D_N erwähnten Fehlers verbessert, dass es beim Drücken der Umschalttaste nicht funktioniert.
SebasSBM
105

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
});
Mottie
quelle
6
Ich habe dies auf eine betrogene / ähnliche Frage beantwortet und wurde von einem anderen Benutzer aktualisiert, dass dies jetzt Chrome-Unterstützung bietet. Ich habe dies bestätigt und arbeite jetzt in allen gängigen Browsern - und sollte die beste Lösung für diese Frage sein
Ian Clark
caniuse.com/#search=getModifierState gibt an, dass es derzeit (noch?) nicht von Safari unterstützt wird. In allen gängigen Browsern ist dies möglicherweise noch nicht der Fall.
Jens Kooij
2
Es wird jetzt in Safari unterstützt.
Mottie
1
Und doch erkennt es die Feststelltaste und kann den allgemeinen Feststelltaste-Status nicht erhalten, wenn der Benutzer das Formular
eingibt
Dies scheint zu funktionieren, außer wenn die Feststelltaste in die Aus- Position gedrückt wird . Diese Eingabe wird erst beim nächsten Tastendruck erfasst. Dies war unter Chrome für OS X. Ich bin mir nicht sicher, ob dies etwas ist, das sich über Browser und Betriebssysteme erstreckt.
Ashraf Slamang
24

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

Borgar
quelle
Das ist eigentlich das, wonach ich gesucht habe. Dies funktioniert mit lateinischen und kyrillischen Saiten. Vielen Dank!
Mladen Janjetovic
Dies funktioniert gut, aber Tasten wie LEERTASTE und Ziffern weisen auf die Warnung hin. Kennen Sie eine (ähnlich prägnante / elegante) Problemumgehung?
1
Es ist auch gut, dass Sie die Unvollständigkeit bemerken, aber es ist immer noch unvollständig. Ich bin mir nicht sicher, wie ich das mit dieser Methode beheben soll.
11

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)
  });
Joshuahedlund
quelle
11

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();
    }
});
Joe Liversedge
quelle
Ich bin nicht sicher warum, aber diese Methode funktioniert nicht beim ersten Tastendruck (nur in Chrome getestet).
Könnte es das Problem sein, das leere Felder versteckt? Ich konnte das nicht richtig zum Laufen bringen, zumindest in Chrome. Dies geschieht automatisch in vielen anderen Browsern (zumindest in meiner Version unten), da Backspaces die Nachricht zählen und ausblenden.
Hinweis : Wie Sie hier richtig verwendet haben, müssen Sie das keypressEreignis verwenden, um bei der Eingabe unterschiedliche Groß- / Kleinschreibung zu verwenden, da beide keydownund keyupimmer Großbuchstaben zurückgeben . Infolgedessen wird der Feststelltaste nicht ausgelöst ... wenn Sie beabsichtigen, mite.originalEvent.getModifierState('CapsLock')
KyleMit
6

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.


quelle
4
Eine gute Lösung sollte immer die Unterstützung von Buchstaben außerhalb der englischen Buchstaben AZ beinhalten. Jede andere Lösung ist eine Beleidigung für fast alle nicht englischen Sprachen.
Ehrfurcht
6

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

Ryan Marin
quelle
Hervorragend! Einfach, prägnant und fehlerfrei in meiner Implementierung.
Sirtastic
1
@ Ryan: Danke für den Beitrag! Es ist ein gutes, sauberes Beispiel für Code, obwohl ich darauf hinweisen möchte, dass Ihre Antwort im Grunde die gleiche ist wie die Antwort von Mottie aus dem Jahr 2015, in der Sie beide arbeitenevent.getModifierState("CapsLock").
Mac
5

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> 
Zappa
quelle
Danke für den IE8-Fix. Hat es in meine überarbeitete Antwort aufgenommen (unten). Dies ist jedoch solide.
5

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.

Scheu
quelle
2
Gute Idee. Wenn Sie dem Benutzer eine Warnung anzeigen, dass die Feststelltaste aktiviert ist, ist es wahrscheinlich eine gute Idee, diese Warnung sofort auszuschalten, wenn die Feststelltaste deaktiviert ist. Andernfalls können Sie den Benutzer verwirren.
Ajedi32
3

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

Pavel Azanov
quelle
3

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

ramiz4
quelle
3

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

Alice Rocheman
quelle
1
Upvoted für eine aktuelle Antwort auf eine alte Frage. Vielleicht möchten Sie so etwas wie eine Überschrift hinzufügen, die etwas sagt wie "Für moderne Browser (2017->) versuchen Sie dies" oder "Update für 2017"
eon
3

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.

SebasSBM
quelle
2

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');
    }
});
Formixian
quelle
Dadurch werden Leerzeichen und Rücktasten in Firefox als Großbuchstaben erkannt.
Adrian Rosca
2

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.

Aadit M Shah
quelle
Dies ist eine wirklich geniale Lösung. Es hat jedoch den Fehler, dass das "Capslock" -Objekt mit dem falschen Status (Aus) beginnt, wenn die Feststelltaste aktiviert ist, wenn die Seite den Fokus erhält.
Ric
In der Tat beginnt es mit einem falschen Zustand. Wenn Sie jedoch eine Taste drücken, wird der Status automatisch korrigiert. Wenn Sie einen Weg finden, um den richtigen Status zu erreichen, wenn die Seite den Fokus erhält, würde ich Ihren Code gerne zusammenführen.
Aadit M Shah
2

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.

Enigment
quelle
2

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

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

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

Chris
quelle
0

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;
    }
});
Naga Harish M.
quelle
Funktioniert nur, wenn die Feststelltaste aktiviert ist. Wenn die Feststelltaste deaktiviert ist, wird weiterhin die Feststelltaste aktiviert, jedoch mit gedrückter Umschalttaste (beide mit tatsächlich gedrückter Umschalttaste oder nicht).
Ehrfurcht
Ok Entschuldigung für das @awe
Naga Harish M
0

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> 
Sourabh Kasliwal
quelle
0

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

Oday Fraiwan
quelle
0

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.

Horia Rudan
quelle
0

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();
});
Ben Gripka
quelle
0

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> 
M Arfan
quelle
0

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

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

Mike Sraj
quelle
-1

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.

Frederik.L
quelle
Ja, aber dann müssten Sie immer noch die Feststelltaste erkennen. Außerdem bedeutet dies, dass Sie Großbuchstaben in Kennwörtern nicht zulassen, was nicht optimal ist.
Dave Liepmann
Um festzustellen, ob die Feststelltaste aktiviert ist, müssen Sie überprüfen, ob sich die von Ihnen gesendete Kleinbuchstabenversion des Zeichens davon unterscheidet. Wenn dies -> Feststelltaste ist, dann «Warnung: Sie verwenden die Feststelltaste, aber unser System konvertiert in Kleinbuchstaben », ich denke, Javascript ist schließlich nicht dazu gedacht, die Feststelltaste zu erkennen (Überprüfungen der Feststelltaste erfordern einen Systemzugriff). Sie müssen den Weg finden, der Ihren Anforderungen am besten entspricht
Frederik.L
-1

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;
    }
}
Ron Tornambe
quelle