Beispiel für einen JQuery Focus Selector

JQuery-Fokusauswahl Wählt das Element aus, das den Fokus hat. Der Fokusselektor, der zum Gestalten eines Elements verwendet wird, das den Tastatureingabefokus oder andere Benutzereingaben wie die Aktivierung mit der Maus akzeptiert. Es wird angewendet, wenn ein Element den Fokus vom Benutzer akzeptiert. Es funktioniert mit allen Selektorereignissen und fokussiert das Element, wenn es ausgelöst wird. Es wird als „:focus“ geschrieben, was bedeutet, dass es empfohlen wird, mit einem Doppelpunkt und einem Tag-Namen zu beginnen.

JQuery Focus Selector-Syntax

$(“:focus”)

Beispiel für einen JQuery Focus Selector

<!doctype html>
<head>
<title>JQuery Focus Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Focus Selector Example</h2>
<style>
   input:focus:hover
   {
      background-color:orange;
      border:medium dotted green;
   }
</style>
<script>
   $(document).ready(function(){
      $("input").focus();
   });
</script>
<body>
<form>
   Name:<input type="text" name="uname">
</form>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $(„Eingabe“).focus(); Zeile definiert den Fokusselektor, der das Element fokussiert, wenn es durch Benutzereingaben wie Tastatureingaben oder durch Verwendung mit der Maus ausgelöst wird.
  • Wenn wir das obige Skript ausführen, erhalten wir ein Eingabetypelement, das die Mouse-Hover-Eigenschaft verwendet. Wenn wir mit der Maus auf dem Eingabetextelement bleiben, ändert sich die Hintergrundfarbe in Orange und der Rand wird mit mittlerer gepunkteter grüner Farbe angezeigt.

JQuery Focus Selector-Demo

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Focus Selector-Demo aus

JQuery Focus Selector-Demo

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen