Wie kann ich bestimmte Teile des Werts eines Eingabefelds mit unterschiedlichen Farben gestalten?

Teile von Eingabefeldwerten gestalten

Angenommen ein Szenario, in dem ein Eingabefeld Text in Rot anzeigt, ein bestimmter Teil jedoch unterschieden werden muss Mit blauer Farbe befasst sich diese Untersuchung mit der Machbarkeit, diesen Stil zu erreichen Wirkung.

Antwort:

Leider gilt das CSS-Styling einheitlich für das gesamte Eingabeelement und verhindert so die selektive Änderung eines bestimmten Teils.

Lösung:

Um diese Einschränkung zu umgehen, ist ein Ansatz mit mehreren Elementen erforderlich, der die aufteilt Eingabefeld in drei logische Abschnitte:

• Vor dem Bearbeitungspunkt (unbearbeiteter Teil)
• Am Bearbeitungspunkt (aktuell bearbeiteter Teil)
• Nach dem Bearbeitungspunkt der Bearbeitung (verbleibender unbearbeiteter Teil)

Diese Aufteilung kann nicht durch ein einzelnes Eingabeelement erreicht werden, sondern erfordert die Verwendung von JavaScript.

1. Anfängliches Markup:
   Beginnen Sie mit einem Standard-Eingabeelement ohne Stil. JavaScript ersetzt dieses Eingabeelement durch ein stilisiertes Containerelement, das einem Eingabefeld ähnelt.
2. Dynamic Wrapping:
   Implementieren Sie JavaScript-Ereignishandler (z. B. Click, Keydown, Keyup) für Identifizieren Sie die drei Abteilungen. Wickeln Sie diese Teile in geeignete HTML-Elemente ein (z. B. ) und wenden Sie bei Bedarf ein bestimmtes Styling an.

Beispiel-Markup:

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

Durch Mit dieser Methode kann der gewünschte Effekt der Gestaltung bestimmter Teile des Eingabefeldwerts erzielt werden, während die Zugänglichkeit des Eingabefelds erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Teile des Werts eines Eingabefelds mit unterschiedlichen Farben gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!