JQuery Fügen Sie Standardtext zum Sucheingabefeld hinzu

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:

verwenden

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

Formulare zur Eingabetaste

Formular

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!