textareaのコンテンツを全て印刷する #JavaScript

コンテンツ量可変のtextareaを含むWebページを印刷したときに, textareaのコンテンツ全てを印刷可能にする方法をメモしておきます.　この方法でできることに気づいて試したのは半年くらい前で, 今回
動作確認をせずに書いているのでもしかしたら, 間違っているかも. 動かないなどあれば, 修正します.

HTML側

form.html

<div class="textarea_content">
  <div class="textarea_print" id="hoge_print"><?php echo $hoge; ?></div>
  <textarea id="hoge" data-printdiv="hoge_print"><?php echo $hoge; %></textarea>
</div>

対象となるtextareaと並列にdivタグで同じ内容を持つ要素を作成しておき, それらをラップする形の構造です.

JS側

内側のdivタグとtextareaのコンテンツの中身を同期します. divタグ側が勝手に変わることはないはずなので, textareaのonchangeイベントで, divタグ側にコピーする処理になります. ただ, 下記のコードそのままの場合は, 改行処理がうまくいかないはず.

script.js

$(".textarea_content textarea").on("change", function(evt) {
    var target = this.dataset.printdiv;
    var value = this.value;
    document.getElementById(target).innerHTML = value;
});

CSS側

screen.css

.textarea_content .textarea_print {
    display: none;
}

.textarea_content textarea {
    display: block;
}

print.css

.textarea_content .textarea_print {
    display: block;
}
.textarea_content textarea {
    display: none;
}

画面表示用CSSでは, divタグ側を非表示にしtextareaを表示状態にします. 逆に印刷用CSSでは, divタグ側を表示状態にしtextareaを非表示にします.

まとめ

基本的な考え方は分かってもらえたかなと思いますが, 念のため.

画面上には, textareaとdivで, 2つコンテンツを入れる要素を作成する.
JavaScriptを使って, textareaとdiv内のコンテンツを同期する.
画面用CSSでは, divタグを非表示にしtextareaを表示状態に. 印刷用CSSでは, divタグを表示にしtextareaを非表示にする.