How to insert new line in the div, which displays changes in texterea with jQuery

Question

Hi, I have a textarea in the form, and I need to see what I type there in the separate div like on this site, when you post qestion or answer.
In the textarea I got text from new line when pressing enter, but in the div text stays in the same line. How can I go to new line there?

I'm using this:

<script type="text/javascript">
        $('textarea#message').bind('keyup',function(){
            enteredText = $('textarea').attr('value');
            $('#changetext').text(enteredText);
        });
</script>
<div id="changetext">
</div>
<div><form id="sendgreet" action="">
            <dl>
                <dt><label for="message">Text:</label></dt><dd><textarea cols="24" rows="6" id="message"></textarea></dd>
            </dl>
        </form>
</div>

P.S.: I actually do not need any html functionality there, just plain text with new line inserting.

Answer 1

Try changing the "changetext" div to a pre tag. Then it should keep all of the carriage returns.

Answer 2

var target = $("target_div");
$('textarea').bind("keydown",function() {
  target.html($(this).val().replace(/\r\n/g,'\n').replace(/\n/g,'<br>'));
});

Handles both Unix and Windows linebreaks.

You could insert the text in a pre, but it wouldn't wrap it for you.