displaying a texarea value into another textarea value

I've two input fields, both type textareas.

<input id="display" type="text" disabled="di开发者_StackOverflow中文版sabled" style="border: none; background: none" />
<input id="name" type="text" />

And I'm using jQuery to display the value of #name into #display. The textarea #display is used only for displaying. (It can be changed to any other suitable HTML element)

I use the jQuery code to do that:

$('#name').keyup( function() {
    $('#display').val($('#name').val());
});

The problem is, as I type, I want the value inside #display to wrap within its width. When I type long strings in #name, the string wraps and falls down as the next line but in #display it doesn't do so.

Again, when I type return, I want the same format to be followed up in the #display text field.

Can anyone tell me how do I do that??

You'd need a <textarea>, not an input box if you want multiline text editing:

<textarea id="display" disabled="disabled" style="border: none; background: none; resize: none;"></textarea>
<textarea id="name" style="resize: none;"></textarea>

So to make the two look identical, your code should work:

$('#name').keyup(function() {
  $('#display').val($('#name').val());
});

I added resize: none; because it prevents the textareas from resizing via the little handle on the bottom-right-hand-corner (Webkit only).

You could set a white-space property to #display and make it a div instead of an input

http://www.quirksmode.org/css/whitespace.html

#display {
    white-space:pre;
    white-space:pre-wrap;
    white-space:pre-line;
}

Any one of these values may be appropriate for you, see the link for reference and browser support.

I'm assuming you don't need to post the value of #display, so no need for a form element.