web-dev-qa-db-fra.com

Changer le texte de paragraphe dynamiquement avec jQuery?

Je veux prendre les informations saisies dans un champ de texte et les afficher dans un paragraphe ailleurs sur la page. En gros, exactement ce qui se passe ci-dessous pendant que je tape ceci (allez poser une question et commencez à taper dans la zone de texte principale et vous verrez ce que je veux dire).

Une idée comment faire ça? La page contient tellement de JavaScript que je ne trouve pas comment ils l'ont fait.

jquerytextpreview
26
Carson

Je pense que tu cherches ça.

Voici à quoi devrait ressembler votre code HTML:

<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>

Et jQuery:

$(function(){
  $('#txt').keyup(function(){
     $('#preview').text($(this).val());
  });
});

Ceci saisit la valeur de textarea sur son événement keyup et plus tard, le texte du paragraphe est modifié (méthode text()) par celui de textarea$(this).val().

53
Sarfraz

Voici un exemple qui devrait juste fonctionner - 

<html>
<head>
 <style>
 #typing{background-color:;}
 #display{background-color:#FFEFC6;}
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
 <div id="typing">
  <input type="text" name="typing" value="" id="typing_input" style="height:100px;width:300px;">

  </input>
 </div>
 <div id="display">
  <p id="typing_display"></p>
 </div>

 <script type="text/javascript" charset="utf-8">

   $(document).ready(function()
   {
    $('#typing_input').bind("keypress keydown", function(event) {
     $('#typing_display').text($('#typing_input').attr("value"));
    });

   });
 </script>
</body>
</html>

Désolé pour les styles supplémentaires - je ne peux pas m'en empêcher. .Change () de JQuery ne changera pas tant que différents événements ne seront pas déclenchés, .live () et .bind () sont ce que vous voulez. Il y a aussi la partie .attr ("value") qui fait parfois de la magie supplémentaire que je ne comprends pas totalement - mais qui reste à jour. Bonne chance!

0
linguistbreaker

Je voudrais utiliser quelque chose comme keyup et mettre à jour l'affichage chaque fois qu'une touche est relâchée. Vous devrez peut-être également gérer l'événement change au cas où quelqu'un collerait quelque chose dans la boîte.

<div id="container">
<textarea id="textfield"></textarea>
<p id="displayArea"></p>
</div>

<script type="text/javascript">
    var display = $('#displayArea');
    $('#textfield').keyup( function() {
       display.text( $(this).val() );
    }).change( function() {
       display.text( $(this).val() );
    });
</script>

Vous pouvez également consulter l'éditeur WMD , qui est utilisé par SO. Il fait plus que ce que vous demandez, mais vous pouvez en tirer quelques idées.

0
tvanfosson