код внутри pre идет в одну строку на IE8 - PullRequest
Новая
       4

код внутри pre идет в одну строку на IE8

3 голосов
/ 16 сентября 2011

Я пытаюсь взять значение из textarea и поместить его в pre tag, и это нормально работает на chrome и mozilla, но на IE8 весь контент остается на одной строке в pre tag

jsbin ссылка: http://jsbin.com/uwunug/4/edit

вот и все: 

<code><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, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')            
            .replace(/>/g, '&gt;');
}
</script>


 <textarea cols='50' rows='20'>
 </textarea>
 <button id='b1'>make code</button>
 <pre class="prettyprint" id='tt'>

Я заметил (заменив \n на 'enter'), символы \n входят в пре, но они не производят там новую строку

Ответы [ 6 ]

3 голосов
/ 16 сентября 2011

атм. Мое решение - добавить эту строку в конце: 

.replace(/\n/g, '<br\>')

в моем htmlEscape, вот так: 

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')         
            .replace(/</g, '&lt;')                      
            .replace(/>/g, '&gt;')
        .replace(/\n/g, '<br\>');
}

пожалуйста, оставьте свой ответ, если вы знаете лучший

2 голосов
/ 16 сентября 2011

"IE применяет нормализацию HTML к данным, назначенным свойству innerHTML. Это приводит к некорректному отображению пробелов в элементах, которые должны сохранять форматирование, таких как <pre> и <textarea>."

Вставка новой строки в предварительный тег (IE, Javascript)

Решение \n, вероятно, будет вашим лучшим способом (единственный вариант - использовать innerText, но я предпочитаю ваше решение).

1 голос
/ 14 сентября 2012

Использование 

document.getElementById("ID").textContent = 'YOUR TEXT';
1 голос
/ 16 сентября 2011

Если проблема в IE с использованием innerHTML, то не используйте innerHTML: 

document.getElementById("tt").appendChild(document.createTextNode(x));

вместо 

$('#tt').html(htmlEscape(x));
0 голосов
/ 20 февраля 2013

Использование 

                 replace('\r','&lt;br/&gt;')                               .
0 голосов
/ 16 сентября 2011

Поведение по умолчанию для элемента <pre> состоит в том, чтобы отображать все пробелы, включая переводы строк, поэтому по умолчанию вы должны видеть новые строки с \n символами.

Если вы этого не видите, это означает, что поведение элемента по умолчанию было переопределено вашими таблицами стилей.

Это делается с помощью свойства CSS white-space. По умолчанию тег <pre> имеет это свойство, установленное на white-space:pre;. Установка свойства white-space таким образом приведет к тому, что элемент <pre> - или любой другой элемент - отобразит все пробелы, включая переводы строк, в соответствии со значением по умолчанию для элемента <pre>.

Существует несколько возможных настроек для свойства white-space. Вы можете найти примеры их всех и как они влияют на макет здесь: http://www.impressivewebs.com/css-white-space/

Поэтому, если вы хотите, чтобы <pre> действовал как обычно, вы должны либо удалить стили, которые в настоящее время задают свойство white-space, либо переопределить их и установить для них значение по умолчанию.

Надеюсь, это поможет.

ps - если вы планируете опробовать различные значения для white-space, перечисленные на странице, на которую я ссылался выше, учтите, что более старые версии IE (IE7 и более ранние) могут не поддерживать все возможные варианты этого свойства. Если вас это беспокоит, тогда QuirksMode.org имеет таблицу совместимости , которая может вам помочь.

...