Verbessern Sie Ihr Suchfeld mit JQuery: Eine einfache, aber effektive Anleitung! Dieses Tutorial zeigt, wie Sie Ihrem Suchfeld Standardtext hinzufügen, sodass es benutzerfreundlicher wird. Die L?sung stellt sicher, dass der Standardtext auf Klick verschwindet, wieder auftaucht, wenn das Feld leer ist, und bietet visuelles Feedback zum Schwebewesen.

Siehe Live -Demo

Hier ist der JavaScript -Code:

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

Dieser jQuery -Code verwendet das Ereignis blur, um zu überprüfen, ob das Suchfeld leer ist, nachdem der Benutzer mit ihm interagiert. Wenn es leer ist, wird der Standardtext festgelegt.

Die HTML -Struktur (nicht im Detail gezeigt) sollte einfach ein Formular mit einem Eingabefeld mit der ID "Suche" enthalten.

Das CSS -Styling unten liefert die visuellen Verbesserungen:

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

Dieses CSS steuert die Opazit?t des Schwebers, beseitigt das Standardformform -Styling und legt Dimensionen und Stile für das Eingabefeld und die Suchstaste fest.

h?ufig gestellte Fragen (FAQs) zum Hinzufügen von Standardtext zur Suche in Eingaben

Dieser Abschnitt befasst sich mit h?ufigen Fragen zum Hinzufügen von Standardtext zu einem Sucheingabebuch und behandelt sowohl HTML- als auch CSS -Ans?tze. Der ursprüngliche FAQ -Abschnitt wird beibehalten, jedoch aus Klarheit und Zuversicht umformuliert. Spezifische Codebeispiele sind dort enthalten, wo vorteilhaft.

HTML -Platzhalterattribut

Verwenden Sie das HTML -Attribut placeholder für eine einfache M?glichkeit, Standardtext hinzuzufügen. Zum Beispiel: <input type="search" placeholder="Enter search term...">. Der Platzhaltertext verschwindet als Benutzer.

Styling -Platzhaltertext mit CSS

steuern Sie die Farbe des Platzhaltertextes mit CSS:

input::placeholder {
  color: red;
}

Dieses Beispiel legt den Platzhaltertext auf Rot. Denken Sie daran, dass die Browser -Unterstützung für ::placeholder variiert. M?glicherweise ben?tigen Sie Anbieterpr?fixe für ?ltere Browser.

JavaScript für Standardtext

W?hrend das Attribut placeholder h?ufig ausreicht, k?nnen Sie JavaScript verwenden, um den Standardtext dynamisch zu verwalten. Das vorgesehene Beispiel für jQuery oben ist eine solche Methode.

Hinzufügen eines Symbols

Verwenden Sie die Eigenschaften von CSS background-image und background-position, um ein Symbol im Suchfeld hinzuzufügen.

Suchfeld im Fokus erweitern

Verwenden Sie die Pseudoklasse :focus in CSS, um das Suchfeld zu erweitern, wenn es den Fokus gewinnt:

input[type="search"]:focus {
  width: 200px;
}

Button -Styling

Styling Die eingebaute Klarschaltfl?che erfordert browserspezifische CSS aufgrund unterschiedlicher Pseudoelemente. Für Webkit -Browser (Chrome, Safari) k?nnen Sie:

input[type="search"]::-webkit-search-clear-button {
  color: red;
}

Formulare zur Eingabetaste

Stellen Sie sicher

autofokus auf Seite laden

Verwenden Sie das Attribut autofocus im Element <input>, um das Suchfeld automatisch zu fokussieren, wenn die Seite geladen wird: <input type="search" autofocus>.

Das obige ist der detaillierte Inhalt vonJQuery Fügen Sie Standardtext zum Sucheingabefeld hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!