3

textareaa から値を取得して a の中に入れようとしていますが、pre tagchrome と mozilla では問題なく動作しますが、IE8 ではコンテンツ全体が 1 行のままです。pre tag

jsbin リンク: http://jsbin.com/uwunug/4/edit

これがすべてです：

<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'>
</pre>

</body>
</html>

\n私は（ 「入力」に置き換えることによって）\n文字が前に入るが、そこに新しい行を生成しないことに気付きました

4

6 に答える 6

4

atm 私の解決策は、この行を最後に追加することです:

.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\>');
}

あなたがより良いものを知っているなら、あなたの答えを投稿してください

于 2011-09-16T14:12:42.363 に答える
2

<pre>「IE は、innerHTML プロパティに割り当てられたデータに HTML 正規化を適用します。これにより、やなどの書式設定を保持する必要がある要素で空白が正しく表示されません<textarea>。」

pre タグに改行を挿入する (IE、Javascript)

解決策はおそらくあなたの最善の\n策になるでしょう（他の唯一のオプションはinnerTextを使用することですが、私はあなたの解決策を好みます）。

于 2011-09-16T14:18:15.233 に答える
1

使用する

document.getElementById("ID").textContent = 'YOUR TEXT';
于 2012-09-14T08:45:38.537 に答える
1

問題が innerHTML を使用する IE にある場合は、innerHTML を使用しないでください。

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

それ以外の

$('#tt').html(htmlEscape(x));
于 2011-09-16T15:45:46.933 に答える
0

使用する

                 replace('\r','&lt;br/&gt;')                               .
于 2013-02-20T19:16:37.060 に答える
0

この要素のデフォルトの動作は、<pre>改行を含むすべての空白を表示することです。そのため、デフォルトでは、文字がある場所に新しい行が表示されるはずです\n。

それが表示されない場合は、要素のデフォルトの動作がスタイルシートによってオーバーライドされていることを意味します。

これは、CSSwhite-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 にある互換性表が参考になるかもしれません。

于 2011-09-16T14:27:12.283 に答える