I'm trying to take the value from a textarea and put it inside a pre tag, and it works ok on chrome and mozilla but on IE8 the entire content stays on one line in the pre tag
jsbin link:
this is the whole thing:
<html><head>
<script type="text/javascript" src=".6.4/jquery.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(function(){
$('#b1').click(function(){
x = $('textarea').val();
$('#tt').html(htmlEscape(x));
});
});
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
</script>
<textarea cols='50' rows='20'>
</textarea>
<button id='b1'>make code</button>
<pre class="prettyprint" id='tt'>
</pre>
</body>
</html>
I noticed (by replacing \n to 'enter') the \n chars go into the pre but they don't produce new line in there
I'm trying to take the value from a textarea and put it inside a pre tag, and it works ok on chrome and mozilla but on IE8 the entire content stays on one line in the pre tag
jsbin link: http://jsbin./uwunug/4/edit
this is the whole thing:
<html><head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<script type='text/javascript'>
$(function(){
$('#b1').click(function(){
x = $('textarea').val();
$('#tt').html(htmlEscape(x));
});
});
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
</script>
<textarea cols='50' rows='20'>
</textarea>
<button id='b1'>make code</button>
<pre class="prettyprint" id='tt'>
</pre>
</body>
</html>
I noticed (by replacing \n to 'enter') the \n chars go into the pre but they don't produce new line in there
- I notice you're marking your "pre" with "prettyprint" -- does that mean you might be (a) using Google Prettify, and therefore (b) running into this issue? (I can't tell, because your code doesn't work at all for me on IE8 from jsbin...) – Matt Gibson Commented Sep 16, 2011 at 14:08
- @Matt Gibson yes, but atm I removed the prettypring css and js in order to focus just on this issue, have just found a solution btw – Omu Commented Sep 16, 2011 at 14:11
6 Answers
Reset to default 4atm my solution is to add this line at the end:
.replace(/\n/g, '<br\>')
in my htmlEscape, so it's like this:
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br\>');
}
please post your answer if you know a better one
"IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as
<pre>and<textarea>."
Inserting a newline into a pre tag (IE, Javascript)
The \n solution is probably going to be your best shot (the only other option is to use innerText it seems, but I prefer your solution).
If the problem is IE using innerHTML, then don't use innerHTML:
document.getElementById("tt").appendChild(document.createTextNode(x));
instead of
$('#tt').html(htmlEscape(x));
Use
document.getElementById("ID").textContent = 'YOUR TEXT';
The default behaviour of the <pre> element is to display all white space, including line feeds, so by default you should be seeing new lines where you have \n characters.
If you're not seeing that, then it implies that the default behaviour of the element has been overridden by your stylesheets.
This is done using the CSS white-space property. By default the <pre> tag has this property set to white-space:pre;. Setting the white-space property like this will cause the <pre> element - or indeed any other element - to display all white space, including line feeds, as per the default for the <pre> element.
There are a number of possible settings for the white-space property. You can find examples of them all and how they affect the layout here: http://www.impressivewebs./css-white-space/
So if you want the <pre> to act as normal, you should either remove the styles which are currently setting the white-space property, or override them and set it back to the default value.
Hope that helps.
ps - if you plan to try out the various values for white-space as listed on the page I linked above, please note that older versions of IE (IE7 and earlier) may not support all possible options for this property. If you're worried about this, then QuirksMode has a patibility table which may help you.
Use
replace('\r','<br/>') .