Accueil > Forum > > > > PB affichage avec document.getElementById(texte).innerhtml
 PB affichage avec document.getElementById(texte).innerhtml
mardi 16 janvier 2007 à 14:49:40 |
PB affichage avec document.getElementById(texte).innerhtml
telecofr
|
Salut,
sur mon site, j'ai mis un aperçu direct lors de l'écriture des messages du livre d'or.
Mon code est le suivant:
Code Javascript :
function Remplacer(chaine_a_trouver, remplacer_par, texte)
{
for (i=0; i<texte.length; i++)
{
texte = texte.replace(chaine_a_trouver, remplacer_par);
}
return texte;
}
function apercu(texte)
{
texte = Remplacer('[gras]', 'b', texte);
texte = Remplacer('[/gras]', '/b', texte);
texte = Remplacer('[italic]', 'i', texte);
texte = Remplacer('[/italic]', '/i', texte);
texte = Remplacer('[souligne]', 'u', texte);
texte = Remplacer('[/souligne]', '/u', texte);
document.getElementById('apercu').innerHTML = texte;
}
Code HTML:
<textarea name="contenu" rows="15" cols="80"
onKeyUp="javascript: apercu(this.value)" onClick="javascript:
apercu(this.value)">
</textarea><br />
<h3>Aperçu</h3>
<hr />
<div id="apercu" border="1" style="width:80"></div>
Le problème est que lorsque l'on tape une ligne très grande,
l'aperçu continue sur la même ligne et décale tout ce qui est à droite
de l'aperçu, malgré le width : le texte ne s'arrête pas mais continue
!!!
Je voudrais que dans l'aperçu, le texte continue sur la ligne suivante au lieu de continuer sur la même ligne.
Comment faire ?
merci de votre aide !
|
|
mardi 16 janvier 2007 à 15:15:24 |
Re : PB affichage avec document.getElementById(texte).innerhtml
lesdis
|
Réponse acceptée !
Ce probleme n'arrive que lorsqu'il y a une chaîne de caractère sans espace. Le navigateur ne sait pas donc pas couper la chaîne pour le retour à la ligne. Je peut te proposer de jeter un coup d'oeil à la propriétés overflow qui permet au navigateur de gérer ce genre de soucis. Et un petit exemple : <div id="apercu" border="1" style="width:80;overflow:scroll;"></div> Dans ce cas, tu auras des scrollbar autour de ton div et il n'y aura plus de depassement de largeur
|
|
mardi 16 janvier 2007 à 15:20:52 |
Re : PB affichage avec document.getElementById(texte).innerhtml
bultez
|
Bonjour,
vu sur selfhtml... doc, en français, réléchargeable
<html>
<head>
<title>Contrôler le passage à la ligne dans les champs de saisie à plusieurs lignes</title>
</head>
<body>
<h1>Passez à la ligne, mais pas l'arme à gauche!</h1>
<form action="textarea_wrap.htm">
<p>une fois doux:<br><textarea name="doux" cols="30" rows="3" wrap="soft"></textarea></p>
<p>une fois sec:<br><textarea name="sec" cols="30" rows="3" wrap="hard"></textarea></p>
<p>une fois effectif :<br><textarea name="effectif" cols="30" rows="3" wrap="physical"></textarea></p>
<p>une fois apparent:<br><textarea name="apparent" cols="30" rows="3" wrap="virtual"></textarea></p>
<p>et une fois éteint:<br><textarea name="eteint" cols="30" rows="3" wrap="off"></textarea></p>
</form>
</body>
</html>
si j'ai compris la question....
Cordialement  Bul [ mon Site] [ M'écrire]
|
|
mardi 16 janvier 2007 à 16:09:49 |
Re : PB affichage avec document.getElementById(texte).innerhtml
telecofr
|
merci à vous deux !!
en effet, ca reste sur la même ligne s'il n'y pas d'espaces !!
J'ai une autre question : je suis actuellement sous firefox.
L'aperçu en directe marche très bien, mais une fois sous IE 6, l'aperçu n'est pas en direct.
Je m'explique :
sous firefox : je tape dans textarea mon texte et instantanément, le texte est affiché dans l'aperçu.
sous IE : je tape mon texte, rien ne s'affiche dans l'aperçu. Mais si je clique une fois sur la zone textarea où j'ai tapé mon texte, l'aperçu apparait...!
Comment faire pour que ca soit en direct sous IE, comme avec firefox ?
|
|
mardi 16 janvier 2007 à 17:07:55 |
Re : PB affichage avec document.getElementById(texte).innerhtml
lesdis
|
Aucun probleme sur IE7, je ne peut donc pas te répondre pour IE6 vu que je ne l'ai plus.
Mais d'apres ton explication, ce serait peut être un probleme sur l'evenement onKeyup qui ne se declencherais pas.
Bonne journée et n'hésite pas à valider les réponses si ton problème est résolu.
|
|
mardi 16 janvier 2007 à 17:51:40 |
Re : PB affichage avec document.getElementById(texte).innerhtml
PetoleTeam
|
B
onjour à tous...
1/ problème de wrap : FireFox ne connaît pas la propriété wrap quoiqu'on en pense et le fonctionnement est celui que tu as observé
2/ Aperçu en direct : l'événement onkeyup fonctionne bien sous les deux, IE et FF, j'ai un truc similaire qui fonctionne sans probléme... il te faut peut être optimiser ta fonction Remplacer, voici celle que j'utilise...
//--------------------------------
function Change(txt_, src_, dest_){
var Inc = src_.length;
var Pos = txt_.indexOf( src_);
while( Pos > -1){
txt_ = txt_.replace( src_, dest_);
Pos = txt_.indexOf( src_, Pos +Inc);
}
return( txt_);
}
donc peut être un problème d'excécution sous IE...
;0)
|
|
mercredi 17 janvier 2007 à 09:13:10 |
Re : PB affichage avec document.getElementById(texte).innerhtml
telecofr
|
Salut,
PetoleTeam, pourrais tu m'expliquer ton code, car je n'ai pas compris à quoi correspondaient les différentes variables...
Merci !
J'ai un autre souci avec mon bbcode :
lorsque je clique sur un smiley, il envoie bien dans la zone textarea, mais le smiley n'apparaît pas directement dans l'aperçu : il faut je tape une lettre ou que je clique sur la zone textarea pour pouvoir afficher le smiley.
Mon code pour le bbcode est le suivant :
function smiley(img) <!--BBCODE -->
{
window.document.formu_livreor.textarea.value += ' ' + img + ' ';
document.formu_livreor.textarea.focus(); <!-- Pour que le curseur apparaisse dans la zone de texte-->
}
Merci de votre aide !
|
|
mercredi 17 janvier 2007 à 11:55:01 |
Re : PB affichage avec document.getElementById(texte).innerhtml
PetoleTeam
|
B
onjour...
//--------------------------------
// txt_ : texte à modifier
// src_ : balise à remplacer
// dest_ : balise de remplacement
//--------------------------------
function Change(txt_, src_, dest_){
//-- longueur de la chaine à remplacer
var Inc = src_.length;
//-- Position de la 1st occurence de la chaine à remplacer
var Pos = txt_.indexOf( src_);
//-- Tant qu'elle existe => Position > -1
while( Pos > -1){
//-- Remplace src_ par dest_
txt_ = txt_.replace( src_, dest_);
//-- Recherche occurence suivante
Pos = txt_.indexOf( src_, Pos +Inc);
}
return( txt_);
}
Dans ta fonction smiley il faut que tu appelles la fonction aperçu pour faire la mise à jour directement...
;0)
|
|
mercredi 17 janvier 2007 à 12:10:49 |
Re : PB affichage avec document.getElementById(texte).innerhtml
PetoleTeam
|
pour info je travailles avec
<TEXTAREA ID='T_MESS' ...onkeyup="Voir('T_MESS','D_VOIR');"></TEXTAREA>
et
<DIV ID="D_VOIR" ...></DIV>
...la fonction Voir
//-------------------------
function Voir( id_, where_){
var Html;
var O_Srce = document.getElementById( id_);
var O_Dest = document.getElementById( where_);
Html = O_Srce.value;
Html = Change( Html, "[b]", '<b>');
Html = Change( Html, "[/b]", '</b>');
...etc
et la mise à jour de l'aperçu
O_Dest.innerHTML = Html;
}
...je peux donc mettre l'appel de la fonction dans n'importe quelle autre fonction par exemple
//------------------------
function AjoutSmiley( img){
//-- le code au choix ...
//-- Appel de mise à jour
Voir('T_MESS','D_VOIR');
}
;0)
|
|
mercredi 17 janvier 2007 à 17:26:43 |
Re : PB affichage avec document.getElementById(texte).innerhtml
telecofr
|
Merci PetoleTeam pour ton aide !!
j'ai réussi et ça marche nickel.
Dernier souci, j'ai un bouton "effacer" dans mon formulaire, et je voudrais que lorsque je clique dessus, ca efface non seulement le textarea mais aussi l'apercu.
Pour l'instant, je n'ai que le textarea qui s'efface. Pour effacer l'apercu, il faut que je clique une fois dans le textarea...
J'ai essayé de mettre onClick="apercu('textarea','apercu')", dans le input reset, mais ca ne marche pas.
Merci pour l'aide !!
|
|
Cette discussion est classée dans : ligne, texte, document, remplacer, aperçu
 Répondre à ce message
 Sujets en rapport avec ce message
remplacer un retour à la ligne dans une zone de texte [ par nours2001 ]
Bonsoir,Je récupère le contenu d'une zone de texte multiligne et je voudrais l'afficher dans une nouvelle fenêtre. le problème, c'est qu'il faudrait q
Une erreur dans une ligne...où est-elle ? :( [ par Inekman ]
Salut,je ne suis pas débutant, ni intermédiaire et ni expert. cependant, il se trouve qu'aujourd'hui je dois utiliser une fonction en Javascript et ce
Passage à la ligne dans un editeur texte en JS [ par chguigoz ]
Bonjour tout le monde!J'utilise un editeur de texte en js fonctionnant dans une iframe.Ca fonctionne trés bien à part que j'ai un petit probleme.Le so
pour remplacer du texte ??? [ par CoChOnOu ]
hello à tous,voilà, dans ma page j'ai un tableau, hors, je voudrais via un javascript remplacer le contenu d'une des cases.En clair, j'ai :blablaet vi
appendChild [ par bultez ]
buldans le script suivantappendChild ajoute bien la "ligne 2"mais font et br .. pas pris en compte : s'affichent comme du texteje fais quelle erreur ?
Sauver un fichier en javascript avec des longues lignes [ par rkampf ]
Je veux sauver le texte d'une page dans un fichier que l'utilisateur choisit.Lors de l'affichage à l'écran tout va bien, le fichier s'enregistre, mail
Afficher un texte ligne par ligne [ par Skippy2605 ]
Bonjour,Je voudrais afficher un texte ligne par ligne (ou un tableau contenant plusieurs messages)Le problème étant de ne pas afficher le message comp
Explication de code [ par Ma2004 ]
Salut à tous !J'ai trouvé ce code sur Internet mais celà ne m'intéresse pas de le recopier sans le comprendre alors je cherche quelqu'un qui pourrait
Comment Griser pleins de controles (checkbox) en une boucle ??? [ par SnowAngeL ]
je fais une fonction avec une boucle pour griser des controles d'un formulaire, c'est utile et moins long à charger quand on a 50 controles à griser..
className la ligne de code mystère [ par sapakus ]
Bonjour, Au tout début d'un fichier .js trés trés long réalisé par un chevronné professionnel de la programmation web, j'ai trouvé cette ligne de comm
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|