Wie kann ich Textsuffixe zu „'-Elementen hinzufügen, um ein besseres Benutzerfeedback zu erzielen?

Hinzufügen von Textsuffixen zu

Im Bereich der Benutzeroberflächen ist es wichtig, klare Angaben zu machen und intuitives Feedback zur Anleitung der Benutzer. Beim Umgang mit numerischen Eingaben ist es von entscheidender Bedeutung, die verwendeten Maßeinheiten anzugeben. Der HTML-Standard Dem Element fehlt diese Funktionalität. Dieser Artikel befasst sich mit einer Lösung zum Hinzufügen von Textsuffixen zu numerischen Eingabefeldern.

Mit einer Kombination aus HTML und CSS können wir für jede Eingabe ein benutzerdefiniertes Wrapper-Element erstellen. Dieser Wrapper positioniert das Unit-Suffix als Pseudoelement ::after. Durch die Verwendung der absoluten Positionierung bleibt das Pseudoelement unabhängig vom Layout des Eingabefelds und ermöglicht flexible Gestaltungsmöglichkeiten.

Im Wrapper befindet sich das Pseudoelement ::after oben und rechts im Eingabefeld. Als Inhalt enthält es das gewünschte Einheitenkürzel. Dieser Ansatz eignet sich für Szenarien, in denen die Benutzereingabe relativ kurz ist, und stellt sicher, dass das Einheitensuffix neben der Zahl lesbar bleibt.

Um UX zu optimieren, können wir etwas Interaktivität hinzufügen. Wenn Sie den Mauszeiger über das Eingabefeld bewegen oder darauf fokussieren, wird das Einheitensuffix leicht nach links verschoben. Ziel dieser Bewegung ist es, das Erscheinungsbild von Pfeilschaltflächen in bestimmten Browsern anzupassen und sicherzustellen, dass sowohl die Einheit als auch die Pfeile während Benutzerinteraktionen sichtbar bleiben.

Hier ist ein Beispielcode-Snippet, das die Implementierung demonstriert:

/* CSS */
div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'ms';
}

.db::after {
  content: 'db';
}

.percent::after {
  content: '%';
}

/* HTML */
<div class="ms">
  <input type="number" id="milliseconds" />
</div>

<hr />

<div class="db">
  <input type="number" id="decibel" />
</div>

<hr />

<div class="percent">
  <input type="number" id="percentages" />
</div>

Mit dieser Technik können Benutzer nun intuitiv zwischen numerischen Werten unterscheiden, die Millisekunden, Dezibel oder Prozentsätze darstellen. Durch das Hinzufügen dieser subtilen Textsuffixe verbessern wir die allgemeine Benutzerfreundlichkeit und Klarheit unserer numerischen Eingabefelder und ermöglichen es Benutzern, genaue und aussagekräftige Daten bereitzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich Textsuffixe zu „'-Elementen hinzufügen, um ein besseres Benutzerfeedback zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!