Question

I’ve two input fields, both type textareas.

<input id="display" type="text" disabled="disabled" 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??

Answer 1

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