web-dev-qa-db-fra.com

Texte multicolore surligné dans une zone de texte ou une entrée de texte

J'aimerais définir du texte dans une zone de texte ou une entrée de texte en utilisant des couleurs différentes (l'une ou l'autre convient, je n'ai pas besoin des deux). Pensez à quelque chose comme une coloration syntaxique simple. Donc, disons que j'ai quelques mots-clés définis. Je souhaite que ces mots soient colorés d'une couleur différente au fur et à mesure que l'utilisateur le tape dans la zone de saisie de texte ou de texte

Je comprends que cela doit être une combinaison de CSS, Javascript et peut-être de la poussière de lutin. Je me demande dans quelle direction je dois creuser pour savoir comment cela peut être fait.

Je vous remercie

javascripthtmlcsshtml5css3
20
oneself

Non, vous ne pouvez pas faire cela dans une entrée de texte ou une zone de texte. Toute propriété liée au texte CSS affectera tout le texte dans la zone de texte/entrée. Vous aurez besoin d'un élément ou d'un document modifiable pour mettre en évidence la syntaxe. Exemple (fonctionne dans tous les navigateurs récents; le dernier navigateur majeur à ne pas prendre en charge contenteditable était Firefox 2.0):

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

44
Tim Down

Trouvez-vous cela?

Utilisez jQuery.colorfy

Code: https://github.com/cheunghy/jquery.colorfy

Démo: http://cheunghy.github.io/jquery.colorfy/

Screencast: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

1
Zhang Kai Yu

Cela peut être fait en utilisant un style à l'intérieur de la balise, c'est une référence de l'un de mes sites Web où j'ai déjà fait cela. 

<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