Menu

Previsualisation jquery [Résolu]

novice - 14 mai 2018 à 23:57 - Dernière réponse :  novice
- 16 mai 2018 à 16:50
Bonjour,

j'ai ce code

<button class="icon-button-previsualiser" type="submit">prévisualiser</button>


<textarea data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea>


j'aimerais quand on met un message dans le texterea et ensuite on clique sur prévisualiser ca s'affiche

merci

Afficher la suite 

Votre réponse

13 réponses

jordane45 22114 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 août 2018 Dernière intervention - 15 mai 2018 à 00:30
0
Merci
Bonjour
Tu veux le prévisualiser où ?
Il nous manque un peu de ton code html non ?
jordane45 22114 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 août 2018 Dernière intervention - 15 mai 2018 à 23:04
Pour les retours à la ligne.. c'est normal.
Lorsque tu ecris dans le textarea, les retours à la lignes sont traduits en NL (new line)
Alors qu'en html .. pour faire des sauts de lignes, il faut utiliser des <br>
Pour ça, tu peux utiliser une petite fonction JS qui fera la "transformation"
String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}


et pour l'utiliser,
$("#zone-previ").html(contenuTextArea.nl2br());


pour le reste... je n'ai rien compris à ton charabia.
Ni ce que viennent faire les bbcode dans cette question....

Je te rappel à tout hasard que :
- ici... on pose UNE question par discussion. cela permet de s'y retrouver plus facilement.
Ta question était :

j'aimerais quand on met un message dans le texterea et ensuite on clique sur prévisualiser ca s'affiche

Et je pense que j'y ai répondu. Tu peux donc mettre le sujet en résolu (via l'icone de roue crantée qui se situe à droite de ton titre )

- Quand on pose une question, on colle la TOTALITE du code qui va avec .. histoire qu'on sache de quoi on parle.
Mais tu le colleras dans une nouvelle discussion propre à ce "nouveau" souci.


Merci.
j'ai refait vite fait un petit truc sans bbcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
	  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// previsualisation
function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone_previ").html(contenuTextArea);
}

// afficher et masquer

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "guide_1"){
             $("#guide_1_div").css("display", "block");
         }
         else{
             $("#guide_1_div").css("display", "none");
         }
    }); 
});
</script></head>

<body>
<form action="ajout.php" method="post"><p>
	  <div id="guide_1_div">
	  
	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone_previ" >ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>
	  </div>
	  <!--fin de cette parti sera caché-->
<div class="global-nouveau-formulaire"><textarea  id="nouv_msg" data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea></form></div>



<button class="icon-button-previsualiser" id="guide_1" type="button" onclick="previsualiser();">prévisualiser</button>





</html>


j'ai mis un code pour afficher et cacher le cadre qui fonctionne à moitier

quand j'actualise la page on voit toujours cette parti de cette ligne

<div id="guide_1_div">
	  
	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone_previ" >ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>
	  </div>

normalement, il devrait être caché.

et quand je clique sur le boutton

<button class="icon-button-previsualiser" id="guide_1" type="button" onclick="previsualiser();">prévisualiser</button>


le cadre s'affiche bien

dont ma question comment cacher le cadre <div id="guide_1_div">

quand on réactualise

merci
jordane45 22114 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 août 2018 Dernière intervention - 16 mai 2018 à 15:28
// previsualisation
function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone_previ").html(contenuTextArea);
}

// afficher et masquer

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "guide_1"){
             $("#guide_1_div").css("display", "block");
         }
         else{
             $("#guide_1_div").css("display", "none");
         }
    }); 
 
    //on masque par defaut
    $("#guide_1_div").css("display", "none");
});
met résolue et je verrais plus tard bbcode
excusez-moi, il y a un juste un petit bug comment expliquer

quand je met un texte et j'appuie sur le boutton, là ca me fait bien apparaître le texte jusqu'a là c'est bon

mais si je veux rajouter un ou 2 mot dans le texterea quand je clique sur le texterea ca me fait disparaître le cadre

coment on peut eviter

après c résolu merci
Commenter la réponse de jordane45