webentwicklung-frage-antwort-db.com.de

Mehrfarbige Textmarkierung in einem Textbereich oder einer Texteingabe

Ich möchte Text in einem Textbereich oder Texteingabe mit anderen Farben einstellen (das eine oder das andere ist in Ordnung, ich brauche nicht beides). Stellen Sie sich etwas wie einfache Syntaxhervorhebung vor. Nehmen wir an, ich habe einige Schlüsselwörter definiert. Ich möchte, dass diese Wörter in einer anderen Farbe dargestellt werden, wenn der Benutzer den Textbereich oder die Texteingabe eingibt

Ich verstehe, dass dies eine Kombination aus CSS, Javascript und vielleicht etwas Pixie-Staub sein muss. Ich frage mich, in welche Richtung ich gehen muss, um herauszufinden, wie man das machen kann.

Vielen Dank

20
oneself

Nein, das können Sie nicht in einem Textfeld oder einer Texteingabe machen. Jede CSS-Eigenschaft, die sich auf Text bezieht, wirkt sich auf den gesamten Text innerhalb des Textbereichs/der Eingabe aus. Sie benötigen ein bearbeitbares Element oder Dokument, um die Syntax hervorzuheben. Beispiel (funktioniert in allen aktuellen Browsern; der letzte große Browser, der contenteditable nicht unterstützte, war Firefox 2.0):

<code contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>

44
Tim Down
1
Zhang Kai Yu

Dies kann tatsächlich durch die Verwendung des Stylings innerhalb des Tags erfolgen. Dies ist eine Referenz von einer meiner Websites, auf der ich dies gemacht habe 

<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
 blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
 type="text"
 required autofocus />
0
Provision