[ JAVASCRIPT ] Aperçus de texte en couleur ?

Fermé
Naj - 8 juin 2008 à 14:31
 A.Nonymous - 8 juin 2008 à 23:45
Bonjour,

Admettons que nous avons un champ input, et que dans ce champ on y met par exemple du code HTML par exemple <b><font color="#cccccc">un texte</b></font> et qu'en cliquant sur un bouton à coté du champ, une zone génère un aperçu ce texte donc en gris et gras.

Je ne sais pas si je suis en train de rêver, où si c'est vraiment réalisable, je fais donc appel à votre savoir, est-il possible de générer des aperçu de ce qu'on met dans un champ input avec du javascript ?

Si c'est possible j'aimerai avoir quelques pistes pour me lancer.

Merci de m'avoir lu et merci d'avance à ceux qui répondrons à ce message.
A voir également:

3 réponses

<script type="text/javascript">
updatePreview = function()
{
document.getElementById('divpreview').innerHTML = document.getElementById('zonetexte').value;
}
</script>
<textarea id="zonetexte"></textarea>
<div id="divpreview"></div>
<input type="button" onclick="updatePreview()" value="Preview" />
0
Merci pour ta réponse, mais ce code donne un aperçu du contenu de la zone input tel qu'il est, ce que je voudrai savoir, c'est si il est possible de transformer l'aperçu selon ce qu'il contient, par exemple, si on met un texte avec des balises HTML pour mettre un texte en rouge, que dans l'aperçu ces balises ne s'affichent pas, mais affiche un texte en rouge, comme le voulait les balises.

C'est sur ce point que je voudrai savoir si c'est réalisable en javascript.

En tout cas merci beaucoup d'avoir prit la peine de me répondre.
0
A non désolé, ca fonctionne bien, j'ai parlé trop vite, mais si à la place de code HTML, on voulais autre chose, comment on devrai faire ?
0
A.Nonymous > Naj
8 juin 2008 à 17:30
:-/
Et que voudrais-tu y mettre si ce n'est pas de l'HTML ? Tu peux aussi y mettre du texte brut si ça te chante ... (Les caractères accentués peuvent mal passer ... )
0
Naj > A.Nonymous
8 juin 2008 à 18:16
En fait, ce que je veux faire, c'est comme un script pour Messenger Plus! Live qui donne un aperçu des pseudos en couleur (Name Editor), et je me demandais si c'était réalisable sur un site web...
0
A.Nonymous > Naj
8 juin 2008 à 18:22
Il te faudra donc effectuer certains traitements entre la lecture dans le champ de saisie et l'affichage dans le div, des traitements du genre de :

document.getElementById('zonetexte').value.replace('(?)', '<img src="pointinterrogation.gif" />');

Il va donc falloir lister toutes les combinaisons possibles ( raccourcis de smileys, d'images, ...) et y associer une image pour chaque. Donc oui, c'est faisable ...
0
Merci beaucoup déjà pour m'éclairer ^^

Mais ca ne serai pas forcement des images, mais des éléments en couleur, des lettres, caractères spéciaux, etc...

par exemple, un pseudo en couleur sur MSN se fait avec des codes comme ·# pour gras ·$4 pour la couleur rouge etc, es-ce vraiment possible de faire truc un pareil ? qui mettrai en couleur si il y a code qui correspond à une couleur, qui mettrai en forme le texte voir même afficher des smileys... j'ai l'impression que ça ferai vraiment, mais vraiment beaucoup.

J'ai regardé dans la source du script en question, Name Editor, et j'ai rien trouvé, apparemment il serai directement relié à un truc dans Live Messenger ou je sais pas trop, ça à l'air si automatisé...
0
:/
Mettre en place la gestion des couleurs risque de devenir un peu plus compliqué que de faire de simples "replace" ...

Petit rappel : pour mettre un texte en couleur ou avec un fond de couleur, il faut spécifier un style à une balise HTML.
Par exemle,
texte normal
<span style="color:#FF0000;">texte de couleur rouge</span>
<span style="background-color:#0000FF;">texte sur fond bleu</span>

L'exercice n'est pas impossible, mais plutôt difficile quand on ne connait pas le Javascript.
0