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.

Answer 1

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.

Answer 2

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);
    })
);

Answer 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();
    }