PB affichage avec document.getElementById(texte).innerhtml [Résolu]

telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention - 16 janv. 2007 à 14:49 - Dernière réponse : telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention
- 19 janv. 2007 à 19:00
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>


Aperçu


<hr />

 
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 !
Afficher la suite 

Votre réponse

11 réponses

Meilleure réponse
lesdis 401 Messages postés mercredi 19 avril 2006Date d'inscription 6 juin 2011 Dernière intervention - 16 janv. 2007 à 15:15
3
Merci
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 :

Dans ce cas, tu auras des scrollbar autour de ton div et il n'y aura plus de depassement de largeur

Merci lesdis 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 83 internautes ce mois-ci

Commenter la réponse de lesdis
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 16 janv. 2007 à 15:20
0
Merci
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>





Passez à la ligne, mais pas l'arme à gauche!






<form action="textarea_wrap.htm">
une fois doux:
<textarea name="doux" cols="30" rows="3" wrap="soft"></textarea>

une fois sec:
<textarea name="sec" cols="30" rows="3" wrap="hard"></textarea>

une fois effectif :
<textarea name="effectif" cols="30" rows="3" wrap="physical"></textarea>

une fois apparent:
<textarea name="apparent" cols="30" rows="3" wrap="virtual"></textarea>

et une fois éteint:
<textarea name="eteint" cols="30" rows="3" wrap="off"></textarea>

</form>






</html>






   si j'ai compris la question....





<hr />
               Cordialement          Bul       [mon Site]    [M'écrire]
<hr />
Commenter la réponse de cs_bultez
telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention - 16 janv. 2007 à 16:09
0
Merci
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 ?
Commenter la réponse de telecofr
lesdis 401 Messages postés mercredi 19 avril 2006Date d'inscription 6 juin 2011 Dernière intervention - 16 janv. 2007 à 17:07
0
Merci
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.
Commenter la réponse de lesdis
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 16 janv. 2007 à 17:51
0
Merci
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)
Commenter la réponse de PetoleTeam
telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention - 17 janv. 2007 à 09:13
0
Merci
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 !
Commenter la réponse de telecofr
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 janv. 2007 à 11:55
0
Merci
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)
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 janv. 2007 à 12:10
0
Merci
pour info je travailles avec

<TEXTAREA ID='T_MESS' ...onkeyup="Voir('T_MESS','D_VOIR');"></TEXTAREA>
et

...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]",  '');
  Html = Change( Html, "/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)
Commenter la réponse de PetoleTeam
telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention - 17 janv. 2007 à 17:26
0
Merci
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 !!
Commenter la réponse de telecofr
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 janv. 2007 à 18:05
0
Merci
Même principe que pour les boutons insertion de smiles...

une fonction qui permet des inits divers...
//---------------------------
function Re_Init(id_, where_){
  var O_Srce = document.getElementById( id_);
  var O_Dest = document.getElementById( where_);
  O_Srce.value="";     // le TextArea
  O_Dest.innerHTML=""; // le DIV
}

avec un bouton comme suit...

;0)
Commenter la réponse de PetoleTeam
telecofr 12 Messages postés samedi 7 mai 2005Date d'inscription 5 août 2009 Dernière intervention - 19 janv. 2007 à 19:00
0
Merci
Merci PetroleTeam pour toutes tes réponses !

Tout marche nickel à présent !!!
Commenter la réponse de telecofr

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.