ansaurus

Question

Change paragraph text dyanamically with jQuery?

Answer 1

A:

I would use something like keyup and update the display each time a key is released. You might also need to handle the change event in case someone pastes something into the box.

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

Also, you could look at the WMD editor, which is what SO uses. It does more than you are asking for, but you could get some ideas from it.

tvanfosson 2010-08-09 15:49:50

Answer 2

+1 A:

<html>
<head>
<title></title>

<script type="text/javascript">
    function getText() {

         document.getElementById("textbox").innerHTML = document.getElementById("input").value;
    }
</script>

</head>
<body>
<input type="text" id="input" onkeypress ="getText();"/>


<div id="textbox"> </div>

</body>
</html>

org.life.java 2010-08-09 15:53:25

That works pretty well, but is there any way to do it with jQuery so you don't have include the 'onkeypress' in the input field?Also, I notice it gets delayed by one keystroke. So if I type "Hello" it will only display "Hell" until I hit an extra key

Carson 2010-08-09 15:57:20

Answer 3

+2 A:

I think you are looking for this.

Here is how your html should look like:

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

And jQuery:

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

This grabs the value of textarea on its keyup event and later the paragraph's text is changed (text() method) with that of textarea $(this).val().

Sarfraz 2010-08-09 16:06:22

@Sarfraz - you might want to read the FAQ on what makes a good answer: http://meta.stackoverflow.com/questions/7656/how-do-i-write-a-good-answer-to-a-question. IMO, while your solution may be correct, your answer is not particularly useful if the link dies. You really ought to include the code and a description in the answer itself so it can stand on its own.

tvanfosson 2010-08-09 17:47:00

@tvanfosson: I totally agree with you, I was in a bit of hurry and could not write anything further because I went away and came back now after an hour, thanks for reminding me this and yes explanation of how it works is mandatory and I personally second your answer actually. Thanks again.

Sarfraz 2010-08-09 17:54:58

Answer 4

A:

Hi Carson,

Here's an example that should just work -

<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"&gt;&lt;/script&gt;
</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>

Sorry for the extra styles - can't help myself. Jquery's .change() won't change is until different events are fired, .live() and .bind() are what you want. There's also the .attr("value") part which sometimes does extra magic that i don't totally understand - but it does stay up to date. Best of luck!

linguistbreaker 2010-08-09 16:42:41

ansaurus

tags:

views:

answers:

Change paragraph text dyanamically with jQuery?

related questions