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?
javascript
keyboard
capslock
nickf
quelle
quelle
input type=password
Felder (ähnlich E - Mail - Adresse Validierunginput type=email
in Chrom, etc.)Antworten:
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:
ALTE VERSION:
Funktion isCapslock (e) {
}}
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.
quelle
In jQuery
Vermeiden Sie, dass der Fehler wie die Rücktaste
s.toLowerCase() !== s
benötigt wird.quelle
Mit a können Sie
KeyboardEvent
zahlreiche Schlüssel erkennen, einschließlich der Feststelltaste in den neuesten Browsern.Die
getModifierState
Funktion liefert den Status für:Diese Demo funktioniert in allen gängigen Browsern, einschließlich Mobile ( caniuse ).
quelle
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.
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).quelle
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.
quelle
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).quelle
keypress
Ereignis verwenden, um bei der Eingabe unterschiedliche Groß- / Kleinschreibung zu verwenden, da beidekeydown
undkeyup
immer Großbuchstaben zurückgeben . Infolgedessen wird der Feststelltaste nicht ausgelöst ... wenn Sie beabsichtigen, mite.originalEvent.getModifierState('CapsLock')
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.
Ohne jQuery
Bei einigen anderen jQuery-freien Lösungen fehlten IE-Fallbacks. @ Zappa hat es gepatcht.
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
Wir verwenden
getModifierState
, um nach Feststelltaste zu suchen. Es ist nur ein Mitglied eines Maus- oder Tastaturereignisses, daher können wir keine verwendenonfocus
. Die gebräuchlichste Art und Weise, wie das Kennwortfeld in den Fokus gerückt wird, ist ein Klick oder eine Registerkarte. Wir verwendenonclick
, um innerhalb der Eingabe nach einem Mausklick zu suchen, und verwendenonkeyup
, 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
JS
https://codepen.io/anon/pen/KxJwjq
quelle
event.getModifierState("CapsLock").
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.
Und die Funktion wird über das Ereignis onkeypress folgendermaßen aufgerufen:
quelle
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()
undtoLowerCase()
nicht mit dem Zeichenbereich verglichen wird.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
caps
JavaScript-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.quelle
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
quelle
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 'ä', 'ö', 'ü', '.', ',', '+', '#'
Live-Demo auf jsfiddle
quelle
Eine Variable, die den Status der Feststelltaste anzeigt:
funktioniert in allen Browsern => canIUse
quelle
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:
So funktioniert es auch beim Drücken der Umschalttaste.
quelle
Dieser Code erkennt die Feststelltaste unabhängig vom Fall oder wenn die Umschalttaste gedrückt wird:
quelle
Ich habe eine Bibliothek namens capsLock geschrieben die genau das tut, was Sie wollen.
Fügen Sie es einfach auf Ihren Webseiten ein:
Verwenden Sie es dann wie folgt:
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.quelle
Noch eine andere Version, klar und einfach, behandelt verschobene Feststelltasten und ist nicht auf ASCII beschränkt, denke ich:
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.
quelle
Reagieren
quelle
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.
quelle
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 ...
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
quelle
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.
quelle
Probieren Sie diesen einfachen Code in leicht verständlicher Form aus
Dies ist das Skript
Und das HTML
quelle
Versuchen Sie, diesen Code zu verwenden.
Viel Glück :)
quelle
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.
quelle
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 ...
Auf alle Passwortelemente anwenden ...
quelle
Javascript Code
Wir müssen dieses Skript jetzt mit HTML verknüpfen
quelle
Es ist spät, ich weiß, aber das kann jemand anderem hilfreich sein.
Hier ist meine einfachste Lösung (mit türkischen Zeichen).
quelle
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.
quelle
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.
quelle
Es gibt eine viel einfachere Lösung zum Erkennen der Feststelltaste:
quelle