Question

我想从网站页面打印仅 textarea元素的内容。特别是，我想确保没有任何东西被textarea的边界剪切，因为内容会非常大。

解决这个问题的最佳策略是什么？

Answer 1

创建一个打印样式表，其中除了 textarea之外的所有元素都在CSS中设置为display：none;，而对于textarea，overflow：visible。

将其链接到页面，并将标题中的链接标记设置为media =“print”。

你已经完成了。

Answer 2

使用要打印的媒体集制作不同的CSS

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

http://webdesign.about.com/cs/css/a/aa042103a.htm

Answer 3

如果用户点击“打印”，您可以打开一个新窗口，其中只包含空白页面上textarea的内容并从那里开始打印，然后关闭该窗口。

更新：我认为建议的CSS解决方案可能是更好的策略，但如果有人喜欢这个建议，他们仍然可以推荐它。

Answer 4

我会去寻找其他建议的组合。

不要使用样式表覆盖来终止整个页面的打印按钮，而是通过textarea提供一个按钮，让用户只打印那些内容。

该按钮将打开一个新窗口，带有菜单/镶边等，并仅克隆textarea内容（和/或提供打印css文件）

Answer 5

我制作了一个打印媒体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>

Answer 6

溢出是否可见;在textarea实际上为你们工作？ FF3似乎忽略了打印纸上textarea的规则。不是它是一个错误或任何东西。

仅打印textarea

6 个答案: