preタグの内容をjQueryの.text()で取得するとIEでは改行が消える？

2012/5/10 15:07

ドットインストールに「ソースコードをコピーしやすくする機能」をつけました。

» ドットインストールでソースコードのコピーがしやすくなりました #dotinstall | IDEA*IDEA

これに絡んで、 jQueryを使って pre タグに表示している内容をそのまま textarea に入れるということをしようとしたら、IEだけ挙動が違ったという話です。

サンプルは以下。「Copy by text」ボタンを押すと jQuery の .text() で pre タグの内容を取得、「Copy by html」ボタンを押すと .html() で取得して、その内容を textarea に .val() でセットするというものです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery from pre to textarea</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <pre id="from">
        <span>1行目</span>
        2行目
        3行目
    </pre>
    <textarea id="to" cols="30" rows="5"></textarea>
    <br>
    <input type="button" id="copy_t" value="Copy by text">
    <input type="button" id="copy_h" value="Copy by html">
    <script>
        $('#copy_t').click(function() {
            var t = $('#from').text();
            $('#to').val(t);
        });
        $('#copy_h').click(function() {
            var h = $('#from').html();
            $('#to').val(h);
        });
    </script>
</body>
</html>

これを IE で実行すると、 .text() を使った場合に改行が消えます。 .html() を使う場合は改行は消えませんが、 pre タグ内にタグを実体参照で記述していると、textareaには「<span>」のような状態でセットされてしまいます。

ChromeやFirefoxなら .text() で改行もそのまま取得できるんですが、IEだけはうまくいきませんでした。

というわけで最終的には「pre タグを非表示にし、あらかじめ非表示にしておいた textarea を表示して .select() を実行することで全選択状態にする」という方法に変えたのですが、なんともモヤモヤっとするIEです。