Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mehrfarbigen Text in einem Textbereich anzeigen?

Wie kann ich mehrfarbigen Text in einem Textbereich anzeigen?

Susan Sarandon
Freigeben: 2024-11-29 11:34:10
Original
179 Leute haben es durchsucht

How Can I Display Multi-Colored Text in a Text Area?

Mehrfarbiger Text in einem Textbereich

Es kann schwierig sein, Text mit unterschiedlichen Farben in einem Textbereich oder Eingabefeld anzuzeigen. Es gibt jedoch eine alternative Lösung mit dem contenteditable-Attribut.

Lösung mit contenteditable

Das contenteditable-Attribut macht ein HTML-Element bearbeitbar, ohne es in ein Formularelement umzuwandeln. Dadurch können Sie HTML und CSS verwenden, um den Text innerhalb des Elements zu formatieren, einschließlich der Zuweisung verschiedener Farben.

Beispielcode

<div>
Nach dem Login kopieren

Erklärung

  1. Erstellen Sie ein div-Element mit der ID „mytxt“ und setzen Sie das contenteditable-Attribut auf „true.“
  2. Verwenden Sie innerhalb des div das Element, um den Text zu umbrechen, den Sie einfärben möchten.
  3. Wenden Sie mithilfe von CSS verschiedene Farbstile auf die Span-Elemente an.
  4. Ergebnis

    Das Der obige Code erstellt ein div-Element, das vom Benutzer bearbeitet werden kann. Der Text „Bob“ wird in Blau und der Text „Joe“ in Grün angezeigt. Der Benutzer kann auch den Text bearbeiten oder löschen und die Farben nach Wunsch ändern.

    Hinweis:

    Diese Lösung basiert auf HTML und CSS und ist möglicherweise nicht mit allen kompatibel Browser oder Geräte. Wenn Sie eine robustere Lösung benötigen, sollten Sie die Verwendung einer Drittanbieterbibliothek oder die Implementierung einer benutzerdefinierten JavaScript-Lösung in Betracht ziehen.

    Das obige ist der detaillierte Inhalt vonWie kann ich mehrfarbigen Text in einem Textbereich anzeigen?. 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