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.

What constitutes the line breaks? Are they \r\n? – Matt Greer May 05 '11 at 14:19 — Matt Greer, May 05 '11 at 14:19

score 8 · Answer 1 · answered May 05 '11 at 14:22

8

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.

answered May 05 '11 at 14:22

Matt Ball

354,903
100
647
710

1

Nice to see that one Matt proposes a cause and another Matt writes a solution to that cause at the same time. ;) – Marcel Korpel May 05 '11 at 14:24
We Matts have a special bond :) – Matt Greer May 05 '11 at 17:04
@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? – Gary Ryan May 05 '11 at 19:46
2

@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. – Matt Greer May 05 '11 at 19:54
@Matt Greer Thanks, I thought I tried that, but obviously I miss-typed, because that works. Pheww. – Gary Ryan May 05 '11 at 20:09

score 4 · Accepted Answer · edited Sep 21 '17 at 21:47

4

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

edited Sep 21 '17 at 21:47

TrophyGeek

5,902
2
36
33

answered May 06 '11 at 11:25

Gary Ryan

744
3
8
19

5

This did not work for me, but I was able to solve my problem by using `.val` - http://stackoverflow.com/questions/5583040/show-newlines-in-html-textarea/5583094#5583094 – Justin Ethier Apr 25 '13 at 14:43

score 1 · Answer 3 · answered Sep 05 '13 at 15:29

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

Line breaks won't display in textarea in IE

3 Answers3

Linked