Line breaks won't display in textarea in IE

Question

Using jQuery's .load() method I'm loading text into a textarea. Works fine in Chrome & FF. As always, IE just has to be different and won't display the line breaks.

I've tried white-space:pre-wrap with no luck.

Any ideas?

My code:

$('#textarea').load('data.php');

The data.php simply queries a MySql database and prints the results.

Solution 1

They're compatibility problems with IE when using innerHTML(). As Jquery's .html() and .load() methods both use innerHTML(), they by extension can result in some issues. One solution is to use .text() instead. If you want to load text into a <textarea> using AJAX and Jquery you need to do something like this:

$('#textarea').post('data.php',function(data){
        $(this).text(data);
    })
);

Solution 2

This is probably a line-ending issue. Are the line breaks in the text \ns or \r\ns? If they're just \ns try normalizing the text. You can do this with a bit of JavaScript:

function normalizeNewlines(text)
{
    return text.replace(/(\r\n|\r|\n)/g, '\r\n');
}

This is a solution that's worked for me in the past when doing essentially the reverse: I needed to take text out of a <pre> that could be pasted into ^_!@#$ing Notepad and show up with the line breaks intact.

Solution 3

I used kendoui grid in inline edit mode, for description field textare were applyed, the solution were for ie the inline style:

<textarea style="white-space:pre-wrap;" name="' + options.field + '" ...

And the following code in keydown event:

if (event.keyCode == 13) {
        event.stopPropagation();
    }

Comments

[Marcel Korpel]

Nice to see that one Matt proposes a cause and another Matt writes a solution to that cause at the same time. ;)

[Matt Greer]

We Matts have a special bond :)

[Gary Ryan]

@Matt Thanks for your reply. I've tried this with no luck. I've tried to check for special characters in the string using data.indexOf('\\') is this right?

[Matt Greer]

@Gary, try data.indexOf('\n'), the character is not literally a slash then a letter, it's a single character, it's just visually displayed in code that way.

[Gary Ryan]

@Matt Greer Thanks, I thought I tried that, but obviously I miss-typed, because that works. Pheww.

[Justin Ethier]

This did not work for me, but I was able to solve my problem by using .val - stackoverflow.com/questions/5583040/…