CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen

In diesem Beitrag verwenden wir die Pseudoklasse :placeholder-shown, um mit reinem CSS einen schwebenden Fragezeicheneffekt zu erzeugen.

Schwebendes Textlabel

Beim Umgang mit Eingabefeldern versuchen wir unser Bestes, um den Benutzern ein besseres Erlebnis zu bieten. Es gibt zwei Tag-Attribute, die wir häufig verwenden:

Das Label-Tag ist das am besten geeignete Element, um beschreibende Informationen bereitzustellen, die mit dem Formularelement verknüpft sind.
Mit dem Platzhalterattribut eines Eingabefelds können Sie den Text angeben, der im <input>-Element angezeigt wird, wenn keine Eingabe erfolgt. Es dient der Anzeige von Beispieltexten und nicht von Erklärungen oder Tipps.
Diese beiden Beschriftungseigenschaften können kombiniert werden, um einen „schwebenden Textbeschriftungseffekt“ zu erzeugen, der sich speziell auf Folgendes bezieht:

Zuerst sieht der Benutzer ein Eingabetag mit einem Platzhalterattribut, das einige Beispielfragen anzeigt. Das Beschriftungselement ist standardmäßig ausgeblendet.
Wenn das Eingabefeld aktiviert ist und Sie mit der Eingabe beginnen, schwebt das Beschriftungselement über dem Eingabefeld.
Wenn sich im Eingabefeld Text befindet, wird das Beschriftungselement immer über dem Eingabefeld angezeigt, um den vom Benutzer eingegebenen Inhalt anzuzeigen.

Reines CSS zum Erstellen schwebenden Beschriftungstexts

Registrieren Sie das Fokusereignis, bestimmen Sie, ob die Eingabe einen Wert hat, verbergen Sie ein Element und entscheiden Sie, ob das Element angezeigt werden soll, basierend darauf, ob das Eingabefeld Inhalt enthält. Das klingt nach einem Job für JavaScript, oder? nicht wirklich! Denn es gibt eine CSS-Pseudoklasse: „placeholder-shown“, die den oben genannten Effekt erzielen kann. MDN erklärt diese Pseudoklasse wie folgt:

Die CSS-Pseudoklasse :placeholder-shown zeigt Platzhaltertext in einem <input>- oder <textarea>-Element an.

Mit anderen Worten: Wenn das Eingabefeld einen beliebigen Wert enthält, können wir davon ausgehen, dass die Pseudoklasse :placeholder-shown nicht ausgelöst wird.

So verwende ich diese Pseudoklasse, um schwebende Beschriftungen zu implementieren:

Erstellen Sie den HTML-Code, wählen Sie über den angrenzenden Geschwisterselektor das dem Eingabeelement entsprechende Label-Tag aus und packen Sie die beiden Elemente in ein Div.
Legt den Stil der Pseudoelemente „Input“, „Label“ und „::placeholder“ fest.
Positionieren Sie das Beschriftungselement am Anfang und zentrieren Sie es vertikal innerhalb des Div, dann verbergen Sie es.
Die Kombination der Pseudoklassen :not, :focus und :placeholder-shown bestimmt, wann das Label-Tag angezeigt wird: Wenn der Platzhaltertext verschwindet, wird das Label angezeigt – input:not(:placeholder-shown) + label; Wenn das Eingabefeld den Fokus erhält und der Platzhaltertext nicht angezeigt wird, wird das Label angezeigt – input:focus:not(:placeholder-shown) + label

Befolgen wir die oben genannten Ideen, um HTML und CSS zu vervollständigen.

HTML und CSS

Der Aufbau des HTML ist eigentlich ganz einfach, er sieht so aus:

<div Klasse="Eingabe">
  <input type="text" id="input" class="Input-text" placeholder="Ihr Vorname, zB Nicholas">
  <label for="input" class="Input-label">Vorname</label>
</div>

CSS Code:

.Eingabe {
  /**
   * Die relative Positionierung des Containers ist wichtig, da die Float-Position des Label-Elements relativ dazu berechnet wird*/
  Position: relativ;
}
.Eingabetext {
  /**
   * Legen Sie den Stil des Eingabefelds fest. Schriftgröße und Zeilenhöhe sind sehr wichtig, um die genaue Positionierung des Etiketts zu bestimmen */
  Anzeige: Block;
  Rand: 0;
  Breite: 100 %;
  /**
   * Diese Eigenschaften werden im Beispiel einmalig über benutzerdefinierte Eigenschaften festgelegt:
   *
   * Polsterung
   * Schriftgröße
   * Zeilenhöhe
   */
}
.Eingabetext:Fokus {
  /**
   * Der Stil des Eingabefelds, wenn es den Fokus erhält */
}
.Eingabebezeichnung {
  /**
   * Das Beschriftungselement ist auf absolute Positionierung eingestellt und seine Position und Bewegungsdistanz werden basierend auf dem übergeordneten Element und dem Eingabefeld berechnet */
  Anzeige: Block;
  Position: absolut;
  Deckkraft: 0;
  /**
   * Diese Eigenschaften werden im Beispiel einmalig über benutzerdefinierte Eigenschaften festgelegt:
   *
   * unten
   * links
   * Schriftgröße
   * Zeilenhöhe
   * verwandeln
   * Transform-Ursprung
   * Übergang
   */
}
.Input-text:angezeigter Platzhalter + .Input-label {
  /**
   * Wenn der Platzhaltertext sichtbar ist, wird das Etikett ausgeblendet
   */
  Sichtbarkeit: versteckt;
  z-Index: -1;
}
.Eingabetext:nicht(:Platzhalter angezeigt) + .Eingabebezeichnung,
.Input-text:Fokus:nicht(:Platzhalter angezeigt) + .Input-Label {
  /**
   * Wenn der Platzhalter verschwindet, z. B. während der Eingabe, wird das Beschriftungselement angezeigt und schwebt über dem Eingabefeld*/
  Sichtbarkeit: sichtbar;
  Z-Index: 1;
  Deckkraft: 1;
  /**
   * Diese Eigenschaften werden im Beispiel einmalig über benutzerdefinierte Eigenschaften festgelegt*
   * verwandeln
   * Übergang
   */
}

Kompletter Demonstrationseffekt

Den vollständigen HTML- und CSS-Code können Sie im folgenden Demo-Link sehen:

Effekt-Link

Browserunterstützung

Die Browserunterstützung ist bisher ziemlich gut, mit Ausnahme von Edge.

Zusammenfassen

Oben habe ich Ihnen die Verwendung der Pseudoklasse „placeholder-showed“ in CSS vorgestellt, um den schwebenden Texteffekt im Eingabefeld zu erzielen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!