CODEWITHSUNDEEP
javascripttextarea
frenchie
frenchie

Reputation: 51937

Preserving line feeds in textarea

I'm looking to create an email template from a textare and that can be displayed in a div as well as sent over mailto. Here's a jsFiddle.

The HTML is pretty simple:

<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<div id="TheOutput"></div>

and the javascript that I'm currently trying out looks like this:

$(document).ready(function () {
    $('#TheButton').click(PutTextIntoDiv);
});

function PutTextIntoDiv() {
    var TheText = encodeURIComponent($('#TheTextInput').val());
    $('#TheOutput').text(TheText);
}

Here's the output for now:

enter image description here

As you can see, the encoding and decoding is not working because the line feeds aren't preserved. What do I need to change?

Upvotes: 2

Views: 1142

Answers (1)

Whistletoe
Whistletoe

Reputation: 573

Well, I suppose you need to decode the string with decodeURIComponent()

function PutTextIntoDiv() {
    var TheText = encodeURIComponent($('#TheTextInput').val());
    $('#TheOutput').text(decodeURIComponent(TheText));
}

and replace <div> with <pre> in your HTML:

<pre id="TheOutput"></pre>

Another option if you want to have explicit <br> tags (or whatever):

var brText = TheText.replace(/%0A/g,"<br/>");

Upvotes: 4

Related Questions