Вставка новой строки в предварительный тег (IE, Javascript) - PullRequest
14 голосов
/ 12 октября 2008

В IE, когда я вставляю текст в тег <pre>, новые строки игнорируются:

<code><pre id="putItHere">
function putText () { document.getElementById ("putItHere"). innerHTML = "first line \ nsecond line"; }

Использование \r\n вместо простого \n не работает.

<br/> работает, но вставляет лишнюю пустую строку в FF, что неприемлемо для моих целей.

Ответы [ 11 ]

12 голосов
/ 12 октября 2008

Эти отчет об ошибках quirksmode.org и комментарии о поведении innerHTML в Internet Explorer могут помочь:

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

5 голосов
/ 12 декабря 2008

Обходной путь можно найти на странице, ссылка на которую содержится в принятом ответе. Для удобства использования вот оно:

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "" + str + "
"; } еще { elem.innerHTML = str; }
5 голосов
/ 12 октября 2008

Работает ли это в IE?

document.getElementById("putItHere")
    .appendChild(document.createTextNode("first line\nsecond line"));

Я протестировал его с Firefox, и он работает. : -)

4 голосов
/ 12 октября 2008

<br/> должен выводить только одну строку во всех браузерах. Конечно, удалите также \ n, код должен быть:

document.getElementById("putItHere").innerHTML = "first line<br/>second line";
2 голосов
/ 10 марта 2011

IE9 не нормализует пробелы , в отличие от своих предшественников.

Вы должны проверить поддержку, а не нацеливаться на какой-либо конкретный браузер. Например ...

var t = document.createElement(elem.tagName);
t.innerHTML = "\n";

if( t.innerHTML === "\n" ){
    elem.innerHTML = str;
}
else if("outerHTML" in elem)
{
    elem.outerHTML = "<"+elem.tagName+">" + str + "</"+elem.tagName+">";
}
else {
    // fallback of your choice, probably do the first one.
}
2 голосов
/ 12 октября 2008

Я считаю это.

Я обнаружил, что IE использует \ r \ n, а Fx (другие) использует \ n

var newline;
if ( document.all ) newline = '\r\n';
else newline = '\n';

var data = 'firstline' + newline + 'second line';
document.getElementById("putItHere").appendChild(document.createTextNode(data));

Для плагина TinyMCE (редактор wysiwyg), который я однажды сделал, я использовал режим редактирования BR i и убрал его при отправке и т. д.

Этот код перебирает все элементы BR внутри элементов PRE и заменяет BR на новые строки.

Обратите внимание, что код основан на API TinyMCE, но может быть легко написан с использованием стандартного JavaScript.

Очистить:

        var br = ed.dom.select('pre br');
        for (var i = 0; i < br.length; i++) {
          var nlChar;
          if (tinymce.isIE)
            nlChar = '\r\n';
          else
            nlChar = '\n';

          var nl = ed.getDoc().createTextNode(nlChar);
          ed.dom.insertAfter(nl, br[i]);
          ed.dom.remove(br[i]);
        }

Удачи!

2 голосов
/ 12 октября 2008

Содержимое внутри тега <pre> не должно рассматриваться как HTML.

На самом деле, точка тега <pre> такова, что он отображает форматированный текст.

Использование свойства innerText является правильным способом изменения содержимого тега <pre>.

document.getElementById("putItHere").innerText = "first line\nsecond line";
1 голос
/ 06 декабря 2011

Вот очень маленький твик к ответу Эдварда Уайльда, который сохраняет атрибуты

tag.

if (elem.tagName == "PRE" && "outerHTML" in elem) {
    var outer = elem.outerHTML;
    elem.outerHTML = outer.substring(0, outer.indexOf('>') + 1) + str + "
"; } еще { elem.innerHTML = str; }
1 голос
/ 27 апреля 2010

Если вы не хотите использовать externalHTML, вы также можете сделать следующее для IE, если дополнительный предварительный тег не является проблемой:

<code> if(isIE)
     document.getElementById("putItHere").innerHTML = "<pre>" + content+"
"; еще document.getElementById ("putItHere"). innerHTML = content;
0 голосов
/ 05 мая 2009

Я обнаружил, что innerHTML обрабатывается до его применения к элементу, поэтому
становится новой строкой и удаляются несколько пробелов.

Чтобы сохранить необработанный текст, вы должны использовать nodeValue, например;

document.getElementById('pre_id').firstChild.nodeValue='    white space \r\n ad new line';
...