preタグの内容をjQueryの.text()で取得するとIEでは改行が消える？
ドットインストールに「ソースコードをコピーしやすくする機能」をつけました。
» ドットインストールでソースコードのコピーがしやすくなりました #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です。
パーマリンク
コメント (0)
トラックバック (0)
jQuery
(共同運営)
(共同運営)
