web-dev-qa-db-de.com

Absatztext dynamisch mit jQuery ändern?

Ich möchte die eingegebenen Informationen in ein Textfeld aufnehmen und an anderer Stelle auf der Seite in einem Absatz anzeigen. Im Grunde genau das, was unten passiert, wenn ich dies hier tippe (gehen Sie zu einer Frage und geben Sie in das Haupttextfeld ein und Sie werden sehen, was ich meine).

Irgendeine Idee, wie das geht? Die Seite hat so viel JavaScript, dass ich nicht finden kann, wie sie es gemacht haben.

26
Carson

Ich denke, du suchst das.

So sollte Ihre HTML aussehen:

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

Und jQuery:

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

Dadurch wird der Wert von textarea für sein keyup-Ereignis erfasst, und später wird der Text des Absatzes (text()-Methode) mit dem von textarea$(this).val() geändert.

53
Sarfraz

Hier ist ein Beispiel, das einfach funktionieren sollte - 


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

Entschuldigung für die extra Styles - ich kann mir nicht helfen. Jchangeys .change () ändert sich nicht, bis verschiedene Ereignisse ausgelöst werden. .Live () und .bind () sind das, was Sie wollen. Es gibt auch den .attr ("value") - Teil, der manchmal zusätzliche Magie bewirkt, die ich nicht ganz verstehe - aber er bleibt auf dem neuesten Stand. Viel Glück!

0
linguistbreaker

Ich würde etwas wie keyup verwenden und die Anzeige jedes Mal aktualisieren, wenn eine Taste losgelassen wird. Möglicherweise müssen Sie auch das Änderungsereignis behandeln, falls jemand etwas in das Feld einfügt.

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

Sie können sich auch den WMD-Editor anschauen, den SO verwendet. Es tut mehr als Sie verlangen, aber Sie könnten ein paar Ideen bekommen.

0
tvanfosson