Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie verstecke ich den Platzhaltertext im Fokus in Chrome automatisch?

Patricia Arquette
Freigeben: 2024-11-12 03:01:02
Original
845 Leute haben es durchsucht

How Do I Auto-Hide Placeholder Text on Focus in Chrome?

Platzhaltertext beim Fokus automatisch ausblenden

Die Internetbrowser-Automatisierung hat das Ausblenden von Platzhaltertext beim Fokus vereinfacht, aber dieser Komfort hat eine Ausnahme : Chrom. Für diesen speziellen Browser muss eine spezifische Lösung implementiert werden.

CSS-Ansatz:

input:focus::placeholder {
  color: transparent;
}
Nach dem Login kopieren

Diese CSS-Regel setzt den Platzhaltertext beim Fokussieren auf transparent und sorgt so für eine effektive Darstellung es unsichtbar.

jQuery-Ansatz:

<input type="text" placeholder="Type something here!">
Nach dem Login kopieren
 $("#myInput").focus(function() {
   $(this).attr("placeholder", "");
 });
Nach dem Login kopieren

Der jQuery-Code entfernt den Platzhaltertext, wenn das Eingabefeld den Fokus erhält, und stellt ihn wieder her, wenn der Fokus verloren geht .

Hinweis:

Ursprünglich galt diese Methode als Browser-exklusiv für Chrome, aber moderne Browser unterstützen jetzt den Input::Placeholder-Selektor, wodurch sowohl CSS als auch jQuery möglich sind Ansätze, die in allen Browsern anwendbar sind.

Das obige ist der detaillierte Inhalt vonWie verstecke ich den Platzhaltertext im Fokus in Chrome automatisch?. 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