admin管理员组文章数量:1312764
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/>') .
本文标签： javascriptcode inside pre goes in one line on IE8Stack Overflow
版权声明：本文标题：javascript - code inside pre goes in one line on IE8 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741865974a2401904.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论