WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:textarea内のデータの印刷

0:[投稿] ROM-X [2004/02/09 12:06 ][環境:IE6 UNIX]

textareaタグ内のデータを印刷したいの
ですが、普通に印刷すると表示されたまま
でしか印刷されません。

スクロールしないと見えない部分も印刷
したいのですが、どうすれば良いでしょか?


1:[回答] ぴ [2004/02/09 14:27 ]

印刷関連イベント(IE5〜のみ対応)を使い、印刷時のみ
document.all.textareaのname.style.overflow="visible";
とするか、
@media print { /*印刷時*/ }
@media screen { /*表示時*/ }
のように、目的別にCSSの設定をするか2案を提案します。

自動的にテキストエリアが拡張されますので、レイアウトの配慮も必要になります。

画面上で自動拡張することは確認しましたが、印刷時にどのようになるかは未確認です。

onbeforeprintイベント
・印刷する直前に発生
・印刷内容に反映し、印刷後の画面表示に影響する。

onafterprintイベント
・印刷後に発生
・印刷後の画面表示に反映する。


2:[回答] ぴ [2004/02/09 16:05 ]

>>1の動作確認をしました。
次の方法で、スクロールしないと見えない部分も印刷できました。

<style type="text/css">
@media print { /*印刷時*/
textarea    {overflow:visible;}
}
@media screen { /*表示時*/
textarea    {overflow:auto;}
}
</style>

検証環境
WinXP+IE6SP1


3:[完了] ROM-X [2004/02/09 16:44 ]

ぴ様、ありがとうございました。
>>2
でよさそうです。こちらでいきます。


しかし、折角JavaScrptのもテストしたのでソースをアップしときます。

<html>
<body onbeforeprint="beforeprint()" onafterprint="afterprint()">

<script>
function beforeprint() {
  fm01.area01.style.overflow="visible";
}

function afterprint() {
  fm01.area01.style.overflow="auto";
}
</script>

<form name="fm01">
<p>
<textarea name="area01" rows="4">
AAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBB
AAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBB
AAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBB
AAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBB
AAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBB
</textarea>
</p>
</form>
</body>
</html>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World