Mise en surbrillance de texte multicolore dans un Textarea ou entrée de texte

Je voudrais régler le texte dans une entrée de texte ou texte en utilisant différentes couleurs (l'une ou l'autre est bien, je n'ai pas besoin des deux). Pensez à quelque chose comme une simple mise à jour de la syntaxe. Donc, disons que j'ai défini certains mots clés. J'aimerais que ces mots soient colorés d'une couleur différente lorsque l'utilisateur tape dans la zone de texte ou l'entrée de texte

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

Je vous remercie

Non, vous ne pouvez pas le faire dans une entrée de texte ou de texte. Toute propriété liée au texte CSS affectera l'intégralité du texte dans la zone de texte / entrée. Vous aurez besoin d'un élément ou d'un document modifiable pour obtenir une mise en surbrillance de syntaxe. Exemple (fonctionne dans tous les navigateurs récents, le dernier navigateur principal à ne pas supporter contenteditable était Firefox 2.0):

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

Vous trouvez cela?

Utilisez jQuery.colorfy

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

Demo: http://cheunghy.github.io/jquery.colorfy/

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

Cela peut effectivement ê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 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 />

Vous pouvez simplement faire une balise SPAN pour sélectionner une partie du texte, par exemple:

 Some <span style="color:#FF3333">text</span> here

Ce qui fera apparaître le mot texte en rouge