Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich den Status der Feststelltaste in JavaScript elegant erkennen?

Mary-Kate Olsen
Freigeben: 2024-11-02 03:35:29
Original
679 Leute haben es durchsucht

How Can I Elegantly Detect Caps Lock State in JavaScript?

Caps-Lock-Status in JavaScript mit Eleganz erkennen

Während der herkömmliche Ansatz, jedem Eingabefeld einen Ereignis-Listener hinzuzufügen, um nach Großbuchstaben zu suchen Wenn das Drücken ohne die Umschalttaste ineffizient erscheint, bietet JavaScript eine ausgefeiltere Lösung. Das KeyboardEvent-Objekt kommt mit seiner getModifierState-Methode zur Rettung.

Diese Methode liefert Informationen über den Zustand verschiedener Modifikatortasten, einschließlich der Feststelltaste. Mithilfe dieser Funktion können Sie mühelos feststellen, ob die Feststelltaste aktiviert ist:

<code class="javascript">passwordField.addEventListener('keydown', function(event) {
  var caps = event.getModifierState && event.getModifierState('CapsLock');
  console.log(caps); // Output: True when Caps Lock is pressed
});</code>
Nach dem Login kopieren

Die getModifierState-Methode gibt einen booleschen Wert zurück, der den gedrückten Zustand der Feststelltaste angibt. Dieser Ansatz ist nicht nur prägnanter als die Brute-Force-Methode, sondern funktioniert auch konsistent in allen gängigen Browsern, einschließlich mobilen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich den Status der Feststelltaste in JavaScript elegant erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage