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

问题描述

我有一个带有一些文本区域的表单，当文本超出文本框时允许滚动条.用户希望能够打印屏幕，但此文本不可见.如何使所有文本仅打印可见?我是否更适合打印到 pdf 链接或其他内容?

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?

推荐答案

你不能单独用 CSS 解决这个问题.

You cannot solve this problem with CSS alone.

让我说服你涉及打印样式表和溢出:可见的答案是不够的.打开此页面 并查看源代码.正是他们建议的，对吧?现在打印预览(在 OS X 上的 Chrome 13 中，就像我一样).请注意，当您尝试打印时，您只能看到一两行注释！

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!

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

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

1. 一个 JavaScript 链接，它打开一个新窗口并将 textarea 的内容写入其中以进行打印.或者:

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

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

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

(如果您的 textarea 是只读的，那么服务器端解决方案也是可行的.)

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

请注意，textareas 处理空格的方式与 HTML 默认不同，因此您应该考虑在新窗口中应用 CSS white-space: pre-wrap;分别打开或打开您的助手 div.然而，IE7 和更早版本不理解 pre-wrap，所以如果这是一个问题，要么接受它，要么为它们使用解决方法.或者使弹出窗口实际上是纯文本，字面上提供媒体类型 text/plain(可能需要服务器端组件).

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).

我已经创建了一种 JavaScript 技术的演示一>.

I have created a demo of one JavaScript technique.

核心概念是将 textarea 内容复制到另一个打印助手.代码如下.

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(全部/非打印):

CSS (all / non-print):

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

CSS(打印):

/* 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(使用 jQuery):

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>

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

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

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