当textarea溢出时打印 [英] Print when textarea has overflow

问题描述

我有一个带有一些文本区域的表单，当文本超出文本框时允许滚动条。用户希望能够打印屏幕，并且该文本不可见。如何使所有文字都可见，以便于打印？我是否更好地制作PDF链接或其他内容？ 解决方案 单独使用CSS。

为什么Pure-CSS解决方案不足（使用demo）

让我说服你<涉及打印样式表和 overflow：visible 不足。打开本页面并查看源代码。正是他们所说的，对吧？现在打印预览它（像我一样在OS X上的Chrome 13）。请注意，当您尝试打印时，您只能看到一行或两行注释！

以下是我的测试用例的URL： https://alanhogan.github.io/web-experiments/print_textarea.html

解决方案：

1. 一个JavaScript链接，打开一个新窗口并写入textarea来打印。或者：
   

2. 更新textarea时，将其内容复制到另一个元素中，该元素隐藏在屏幕上，但在打印时显示。

>


3. （如果 textarea 是只读的，那么服务器端解决方案也是可行的。）

请注意，默认情况下， textarea 考虑在你打开的新窗口或你的助手 div 中应用CSS white-space：pre-wrap; ，分别。但是，IE7和旧版本不理解 pre-wrap ，所以如果这是一个问题，请接受它或为它们使用解决方法。或者使弹出窗口实际上是纯文本，从字面上看，它的媒体类型为 text / plain （可能需要服务器端组件）。

打印助手解决方案（带代码+演示）

我创建了 演示一种JavaScript技术。核心概念是将textarea内容复制到另一个打印助手。代码如下。

HTML：

 < textarea name = textareawrap =wrapid =the_textarea> 
< / textarea> 
< div id =print_helper>< / div> 
  

CSS（全部/非打印）：

  / *所有媒体的样式* / 
 #print_helper {
 display：none; 
 
  

CSS（print）：

/ *打印样式（在上面后面包括这个）* /
#print_helper {
display：block;
溢出：可见;
font-family：摩洛哥的Menlo，Deja Vu Sans Mono，Bitstream Vera Sans Mono，等宽;
white-space：pre;
白色空间：预包装;
}
#the_textarea {
display：none;

code




Javascript（with jQuery）：

 < script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min的.js>< /脚本> 
< script type =text / javascript> 
 jQuery（$（$＃$ _ $ _ $ $ $ $ $ $ $ $ $ $ $ $ $''''）$（$＃ b）
 $（'＃the_textarea'）。bind（'keydown keyup keypress剪切复制过去模糊变化'，function（）{
 copy_to_print_helper（）; //考虑消除这个以避免变慢！
 $ b））; 
 copy_to_print_helper（）; //在初始页面加载
}）; 
< / script> 
  

同样，成功的基于JavaScript的演示在 https://alanhogan.github.io/web-experiments/print_textarea_js.html 。 p>

I have a form with some text areas that allow a scroll bar when the text exceeds the text box. The user would like to be able to print the screen, and this text is not visible. How do I make all of the text visible for just printing? Am I better of making a print to pdf link or something?

解决方案

You cannot solve this problem with CSS alone.

Why Pure-CSS Solutions are Insufficient (with demo)

Let me convince you the answers involving print stylesheets and overflow: visible are insufficient. Open this page and look at the source. Just what they suggested, right? Now print preview it (in, say, Chrome 13 on OS X, like me). Note that you can only see a line or two of the note when you attempt to print!

Here’s the URL for my test case again: https://alanhogan.github.io/web-experiments/print_textarea.html

Solutions:

1. A JavaScript link that opens a new window and writes the contents of the textarea to it for printing. Or:

2. When the textarea is updated, copy its contents to another element that that his hidden for screen but displayed when printed.

3. (If your textarea is read-only, then a server-side solution is also workable.)

Note that textareas treat whitespace differently than HTML does by default, so you should consider applying the CSS white-space: pre-wrap; in the new window you open or to your helper div, respectively. IE7 and older do not understand pre-wrap however, so if that is an issue, either accept it or use a workaround for them. or make the popup window actually plain text, literally served with a media type text/plain (which probably requires a server-side component).

The "Print Helper" Solution (with code + demo)

I have created a demo of one JavaScript technique.

The core concept is copying the textarea contents to another print helper. Code follows.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (all / non-print):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (print):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (with jQuery):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $('#print_helper').text($('#the_textarea').val());
  }
  $('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

Again, the successful JavaScript-based demo is at https://alanhogan.github.io/web-experiments/print_textarea_js.html.

这篇关于当textarea溢出时打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！