Web サイトのページから textarea 要素のコンテンツのみを印刷したいと考えています。特に、コンテンツが非常に大きくなるため、テキストエリアの境界で何もクリップされないようにしたいと思います。
これに取り組むための最良の戦略は何ですか?
Web サイトのページから textarea 要素のコンテンツのみを印刷したいと考えています。特に、コンテンツが非常に大きくなるため、テキストエリアの境界で何もクリップされないようにしたいと思います。
これに取り組むための最良の戦略は何ですか?
textarea以外のすべての要素が CSS で display: none; に設定され、textarea については overflow: visible に設定されている印刷スタイルシートを作成します。
ヘッダーの link タグが media="print" に設定されているページにリンクします。
あなたは終わった。
メディアを印刷用に設定して別の CSS を作成する
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
ユーザーが [印刷] をクリックすると、空白ページにテキストエリアの内容だけが表示された新しいウィンドウが開き、そこから印刷を開始してから、そのウィンドウを閉じることができます。
更新: 提案されている CSS ソリューションはおそらくより良い戦略だと思いますが、この提案が気に入った場合は、賛成票を投じることができます。
私は他の提案の組み合わせに行きます。
スタイルシートのオーバーライドでページ全体の印刷ボタンを強制終了しないでください。代わりに、ユーザーがそれらのコンテンツのみを印刷できるように、テキストエリアのそばにボタンを提供してください。
そのボタンは、メニュー/クロムなどを含む新しいウィンドウを開き、テキストエリアのコンテンツのみを複製します(およびまたは印刷cssファイルを提供します)
多くのフィールドを非表示にする印刷メディア CSS を作成しました。IFRAME を動的に作成する nicEdit を使用していたため、問題は複雑でした。そのため、onblur イベントを受け取り、非表示の (印刷を除く) Div にコピーするイベントを追加する必要がありました。「divtext」は隠し Div で、「storyText」は TextArea です。
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
nicEdit の JavaScript コード:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>
オーバーフローしましたか: 見える; on textarea は実際にあなたの誰かのために働きますか? FF3 は、印刷シートのテキスト領域に関するその規則を無視しているようです。バグでもなんでもないです。