我想只打印网站页面中 textarea 元素的内容。特别是,我想确保文本区域的边界不会剪裁任何内容,因为内容会非常大。
解决这个问题的最佳策略是什么?
我想只打印网站页面中 textarea 元素的内容。特别是,我想确保文本区域的边界不会剪裁任何内容,因为内容会非常大。
解决这个问题的最佳策略是什么?
制作一个打印样式表,其中除textarea 之外的所有元素都在 CSS 中设置为 display: none;,对于 textarea,overflow: visible。
将其链接到页眉中的链接标记设置为 media="print" 的页面。
你完成了。
使用设置为打印的媒体制作不同的 CSS
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
如果用户单击“打印”,您可以在空白页上打开一个仅包含文本区域内容的新窗口并从那里开始打印,然后关闭该窗口。
更新:我认为建议的 CSS 解决方案可能是更好的策略,但如果有人喜欢这个建议,他们仍然可以投票。
我会考虑其他建议的组合。
不要用样式表覆盖来杀死整个页面的打印按钮,而是通过文本区域提供一个按钮,让用户只打印那些内容。
该按钮将打开一个新窗口,其中包含菜单/chrome 等,并仅克隆 textarea 内容(和或提供打印 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>
是否溢出:可见;在 textarea 上实际上对你们中的任何人有用吗?FF3 似乎忽略了打印表中 textarea 的该规则。并不是说它是一个错误或任何东西。