Lösung für das Problem des Springens der Textposition, wenn das Suchtextfeld den Fokus verlässt

Lösung für das Problem des Springens der Textposition, wenn das Suchtextfeld den Fokus verlässt

Beim Setzen des Textes im Suchtextfeld springt die Position beim Verlassen des Fokus

Code kopieren
Der Code lautet wie folgt:

//Suchtextfeld
$("#txtSearch").fokus(Funktion () {
if ($(this).val() == "Bitte geben Sie den Suchbegriff ein") {
$(diese).val("");
$(this).css("Farbe", "schwarz");
}
}).unschärfe(Funktion () {
wenn ($(this).val() == "") {
$(this).css("color", "gray").val("Bitte geben Sie das Suchwort ein");
}
});

CSS hinzufügen

Code kopieren
Der Code lautet wie folgt:

#txtSuche
{
Breite: 480px;
Höhe: 20px;
vertikale Ausrichtung: Mitte;
}

<<:  So implementieren Sie ein horizontales Balkendiagramm mit Prozentangaben in E-Charts

>>:  Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen

Artikel empfehlen

Detailliertes Tutorial zur Verwendung des Befehls xargs unter Linux

Hallo zusammen, ich bin Liang Xu. Sind Sie bei de...

Einführung und Verwendung der Angular-Pipeline PIPE

Vorwort PIPE, übersetzt als Pipeline. Angular Pip...

Vue nutzt Baidu Maps zur Realisierung der Stadtpositionierung

In diesem Artikel wird der spezifische Code von V...

10 zu wenig genutzte oder missverstandene HTML-Tags

Hier sind 10 HTML-Tags, die zu wenig verwendet od...

Einführung in die Nginx-Protokollverwaltung

Nginx-Protokollbeschreibung Über Zugriffsprotokol...

Centos7-Startvorgang und Nginx-Startkonfiguration in Systemd

Centos7-Startvorgang: 1.post (Selbsttest beim Ein...

Nativer JS-Musikplayer

In diesem Artikelbeispiel wird der spezifische JS...

Zusammenfassung der Standardverwendung von HTML-, CSS- und JS-Kommentaren

Das Hinzufügen der erforderlichen Kommentare ist ...

Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben

01. Unendlichkeit Schriftart herunterladen 02. Ban...

JavaScript zum Anzeigen und Ausblenden von Bildern

JavaScript zeigt und verbirgt Bilder. Zu Ihrer In...

Eine kurze Einführung in Web2.0-Produkte und -Funktionen

<br />Was ist Web 2.0? Web2.0 umfasst diese ...

So installieren und implementieren Sie einen Gitlab-Server auf CentOS7

Ich verwende hier das 64-Bit-System CentOS 7. Ich...