Previsualisation jquery

Résolu

novice -
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

A voir également:

Previsualisation jquery
Prévisualisation - Guide
Prévisualisation premiere pro - Forum Montage et acquisition vidéo
Redirection Jquery onclick ✓ - Forum Javascript
Jquery refresh dom ✓ - Forum Javascript
Prévisualisation pdf ne fonctionne pas ✓ - Forum Windows 10

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour
Tu veux le prévisualiser où ?
Il nous manque un peu de ton code html non ?

novice

voilà le code

      <!--début du titre-->
	  <h1 id="titre-nouveau-formulaire">nouveau</h1>
	  <!--fin du titre-->

	  <!--début du global du formulaire-->
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>
	  <!-- par exemple on peut le mettre par là le contenue du mesage du texterea-->

	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire">ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>
	  
	  <legend>nouveau mesage</legend>
	  <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div>
	  <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div>
	  <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea></div></div>

	  <legend>options supplémentaires</legend>

	  <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div>
	  <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif"  placeholder="motif"  /></div></div>
	  <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div>

   	  <!--début du boutton de formulaire-->
      <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="submit">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav>
	  <!--fin du boutton de formulaire-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->

merci

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Déjà, faudrait mieux mettre un élément facile à cibler pour identifier la div à manipuler

<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>

idem pour le textarea

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

Vu que tu veux le faire en JS, il faut retirer le "submit" du bouton

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

Ensuite, côté JS, tu peux faire

function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone_previ").html(contenuTextArea);
}

novice

merci, ca marche,
mais

 <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>

j'aimeras qu'on ne vois pas ce code et des qu'on appuie sur le bouitton previsualiser ca apparaît

je crois qu'il faut faire un display none pour cacher le cadre et des qu'on clique sur previsualiser ca se met un dysplay blok

merci

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > novice

Oui. Tu peux jouer avec le style display
par exemple, pour masquer

$("#zone_previ").css("display","none");

Sinon en jquery il existe les fonctions hide() et show()

$("#zone_previ").hide();

novice

merci ca cache bien le cadre mais des qu'on clique ca n'apparaît plus

je te met tout mon code

le code html

	  <!--début du global du formulaire-->
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>
	  <!--début de cette parti sera caché-->
	  <div id="zone-previ">

	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone-previ"></div>
	  </div>
	  <!--fin de cette parti sera caché-->
	  <legend>nouveau mesage</legend>
	  <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div>
	  <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div>
	  <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea  id="nouv_msg champtexte" name="texte" data-autoresize spellcheck="false" placeholder="nouveau message" onclick="view('textarea','viewDiv');"></textarea></div></div>

	  <legend>options supplémentaires</legend>

	  <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div>
	  <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif"  placeholder="motif"  /></div></div>
	  <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div>

   	  <!--début du boutton de formulaire-->
      <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav>
	  <!--fin du boutton de formulaire-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->

mon code prévisualisation.js

$("#zone-previ").hide();

function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone-previ").html(contenuTextArea);
}

et j'ai rajouter dans id champtexte et name="texte" dans le texterea afin de mettre des bbcode
j'ai mis

<input type="button" class="submit" value="Gras" onClick="balises('gras')" />

et ds bbcode.js

function balises(typebal){
switch (typebal){
case "gras":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[b][/b]'
break;
case "italique":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[i][/i]'
break
case "souligné":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[u][/u]'
break
case "url":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[url=votre lien]nom du lien[/url]'
break}
}

j'ai refais les bouttons j'ai mis

<nav id="global-nouveau-formulaire-button"><ul>
	  <li><button class="icon-button-gras" type="button" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button></li>
	  <li><button class="icon-button-souligner" type="button" onclick="insertTag('<souligner>', '</souligner>', 'textarea')"></button></li>
	  <li><button class="icon-button-italique" type="button" onclick="insertTag('<italique>', '</italique>', 'textarea')"></button></li>
	  <li><button class="icon-button-barrer" type="button" onclick="insertTag('<barrer>', '</barrer>', 'textarea')"></button></li>
	  <li><button class="icon-button-gauche" type="button" onclick="insertTag('<gauche>', '</gauche>', 'textarea')"></button></li>
	  <li><button class="icon-button-centrer" type="button" onclick="insertTag('<centrer>', '</centrer>', 'textarea')"></button></li>
	  <li><button class="icon-button-droite" type="button" onclick="insertTag('<droite>', '</droite>', 'textarea')"></button></li>
	  <li><button class="icon-button-justifier" type="button" onclick="insertTag('<justifier>', '</justifier>', 'textarea')"></button></li>
	  <li><button class="icon-button-puce" type="button" onclick="insertTag('<puce>', '</puce>', 'textarea')"></button></li>
	  <li><button class="icon-button-numero" type="button" onclick="insertTag('<numero>', '</numero>', 'textarea')"></button></li>
	  <li><button class="icon-button-lien" type="button" onclick="insertTag('<lien>', '</lien>', 'textarea')"></button></li>
	  <li><button class="icon-button-arobase" type="button" onclick="insertTag('<mail>', '</mail>', 'textarea')"></button></li>
	  <li><button class="icon-button-secret" type="button" onclick="insertTag('<secret>', '</secret>', 'textarea')"></button></li>
	  <li><button class="icon-button-tableau" type="button"></button></li>
	  <li><button class="icon-button-video" type="button" onclick="insertTag('<video>', '</video>', 'textarea')"></button></li>
	  <li><button class="icon-button-image" type="button" onclick="insertTag('<image>', '</image>', 'textarea')"></button></li>
	  <li><button class="icon-button-attention" type="button" onclick="insertTag('<attention>', '</attention>', 'textarea')"></button></li>
	  <li><button class="icon-button-question" type="button" onclick="insertTag('<question>', '</question>', 'textarea')"></button></li>
	  <li><button class="icon-button-information" type="button" onclick="insertTag('<information>', '</information>', 'textarea')"></button></li>
	  <li><button class="icon-button-erreur" type="button" onclick="insertTag('<erreur>', '</erreur>', 'textarea')"></button></li>
	  </ul></nav>

a causse de tout ca ne veux pas fonctionné

j'aimerais cacher la zone prévisualisation

ensuite cliquer sur gras et italique etc....

ca se met dans le texterea ensuite on clique sur prévisualisation le boutton

et là ca fera apparaître le cadre de la prévisualisation

je sais que c'est un truc tout bête mais là je ne vois pas ou est le soucy

merci

Discussions similaires

PROBLÈME DE PREVISUALISATION PREMIERE PRO

“Echec de previsualisation dans le moniteur source“ adobe Premiere pro

jQuery & Regex

jquery submit

jQuery non interprété

Votre réponse

Discussions similaires