javascript - internet - jquery support
el código dentro de pre va en una línea en IE8 (6)
Utilizar
replace(''/r'',''<br/>'') .
Estoy tratando de tomar el valor de un área de textarea
y ponerlo dentro de una pre tag
, y funciona bien en Chrome y Mozilla, pero en IE8 todo el contenido se mantiene en una línea en la pre tag
jsbin link: http://jsbin.com/uwunug/4/edit
esto es todo:
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/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>
Noté (reemplazando /n
para ''enter'') los /n
caracteres entran en el pre pero no producen una nueva línea allí
El comportamiento predeterminado del elemento <pre>
es mostrar todo el espacio en blanco, incluidos los avances de línea, por lo que, de forma predeterminada, debería ver nuevas líneas donde tenga /n
caracteres.
Si no está viendo eso, implica que el comportamiento predeterminado del elemento ha sido anulado por sus hojas de estilo.
Esto se hace usando la propiedad CSS white-space
. Por defecto, la etiqueta <pre>
tiene esta propiedad configurada en white-space:pre;
. Establecer la propiedad del white-space
este modo hará que el elemento <pre>
, o cualquier otro elemento, muestre todo el espacio en blanco, incluidos los avances de línea, de forma predeterminada para el elemento <pre>
.
Hay una cantidad de configuraciones posibles para la propiedad de white-space
. Puede encontrar ejemplos de todos ellos y cómo afectan el diseño aquí: http://www.impressivewebs.com/css-white-space/
Por lo tanto, si desea que el <pre>
actúe normalmente, debe eliminar los estilos que actualmente configuran la propiedad del white-space
, o anularlos y volver a establecerlos en el valor predeterminado.
Espero que ayude.
ps: si planeas probar los distintos valores de white-space
en white-space
que figuran en la página que he vinculado anteriormente, ten en cuenta que las versiones anteriores de IE (IE7 y anteriores) pueden no admitir todas las opciones posibles para esta propiedad. Si le preocupa esto, entonces QuirksMode.org tiene una tabla de compatibilidad que puede ayudarlo.
Si el problema es IE usando innerHTML, entonces no use innerHTML:
document.getElementById("tt").appendChild(document.createTextNode(x));
en lugar de
$(''#tt'').html(htmlEscape(x));
atm mi solución es agregar esta línea al final:
.replace(//n/g, ''<br/>'')
en mi htmlEscape, entonces es así:
function htmlEscape(str) {
return String(str)
.replace(/&/g, ''&'')
.replace(/"/g, ''"'')
.replace(/''/g, ''''')
.replace(/</g, ''<'')
.replace(/>/g, ''>'')
.replace(//n/g, ''<br/>'');
}
por favor publique su respuesta si conoce una mejor
Utilizar
document.getElementById("ID").textContent = ''YOUR TEXT'';
"IE aplica la normalización de HTML a los datos que están asignados a la propiedad innerHTML. Esto ocasiona una visualización incorrecta de espacios en blanco en elementos que deben preservar el formato, como
<pre>
y<textarea>
".
Insertar una nueva línea en una etiqueta previa (IE, Javascript)
La solución /n
probablemente sea tu mejor opción (la única otra opción es usar innerText, pero prefiero tu solución).