Html 当 textarea 溢出时打印

Print when textarea has overflow

提问by Timothy Ruhle

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?

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

回答by Alan H.

You cannotsolve this problem with CSS alone.

你不能独自解决这个问题，CSS。

Why Pure-CSS Solutions are Insufficient (with demo)

为什么纯 CSS 解决方案不够用（附演示）

Let me convince you the answers involving print stylesheets and overflow: visibleare insufficient.Open this pageand 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!

让我说服您涉及打印样式表overflow: visible的答案是不够的。打开这个页面，查看源码。正是他们建议的，对吧？现在打印预览（比如在 OS X 上的 Chrome 13，就像我一样）。请注意，当您尝试打印时，您只能看到一两行注释！

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

这是我的测试用例的 URL：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 textareais read-only, then a server-side solution is also workable.)

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

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

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

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

请注意，textarea默认情况下 s 处理空格的方式与 HTML 不同，因此您应该考虑将 CSS 分别white-space: pre-wrap;应用于您打开的新窗口或您的 helper div。pre-wrap但是，IE7 及更早版本不理解，因此如果这是一个问题，请接受它或为它们使用解决方法。或者使弹出窗口实际上是纯文本，字面上提供媒体类型text/plain（这可能需要服务器端组件）。

The “Print Helper” Solution (with code + demo)

“打印助手”解决方案（附代码+演示）

I have created a demoof one JavaScript technique.

我创建了一个 JavaScript 技术的演示。

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

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

HTML:

HTML：

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

CSS (all / non-print):

CSS（全部/非打印）：

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

CSS (print):

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 (with jQuery):

Javascript（使用 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 successfulJavaScript-based demo is at https://alanhogan.github.io/web-experiments/print_textarea_js.html.

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

回答by Samuel Gray

Loop through each of your text areas and move the content to a holder

遍历每个文本区域并将内容移动到一个持有人

    window.onbeforeprint = function () {
        $('.print-content').remove();
        $('textarea').each(function () {
            var text = $(this).val();
            $(this).after('<p class="well print-content">' + text + '</p>');
        });
    }

And use the following CSS

并使用以下 CSS

.print-content {
  display: none !important;
}

@media print {
  .print-content {
    display: block !important;
  }
  textarea {display: none !important;}
}

回答by GordonM

I recently ran into the same issue. My solution was to duplicate the content into form controls for editing and into divs for printing.

我最近遇到了同样的问题。我的解决方案是将内容复制到用于编辑的表单控件和用于打印的 div 中。

In my Head I put a print stylesheet.

在我的脑海中，我放了一个打印样式表。

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

In printform.css I put the following

在 printform.css 我把以下内容

.screenOnly { display: none; }
.printOnly { display: inline-block; }

For textareas (and other field types that were causing problems) I used the following code

对于 textareas（和其他导致问题的字段类型），我使用了以下代码

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

When displayed on screen the textareas are shown and the divs duplicating their content are hidden. When printing the opposite applies.

当在屏幕上显示时，会显示 textareas，而复制其内容的 div 被隐藏。打印时则相反。

I know you already picked an answer to this question but while using the print stylesheet is a good idea it didn't describe a specific solution. Setting overflow:visible on the textarea (my first idea) didn't work so I ended up going with the solution above. If you're still having difficulties I hope this helps you out

我知道您已经选择了这个问题的答案，但是虽然使用打印样式表是一个好主意，但它没有描述特定的解决方案。在 textarea 上设置溢出：可见（我的第一个想法）不起作用，所以我最终采用了上面的解决方案。如果您仍然遇到困难，希望这对您有所帮助

回答by Ben G

Just encourter the problem recently too. Thanks for Alan H's posts. It works perfect with Chrome and Safari. However, with IE and Firefox, the issue is that the last several pages(page elements after textarea) will be missing from printing(FF), missing pages and overlapped layout(IE9).

最近也遇到了这个问题。感谢 Alan H 的帖子。它适用于 Chrome 和 Safari。但是，对于IE和Firefox，问题是最后几页（textarea之后的页面元素）将无法打印（FF），缺少页面和重叠布局（IE9）。

Another finding that will be helpful to solve the issue is, you can set textarea's rows properties correctly as the control's height says to make it work with CSS overflow:visable stuff. All browsers seems to respect the rows property while printing.

另一个有助于解决问题的发现是，您可以按照控件的高度正确设置 textarea 的行属性，使其与 CSS 溢出：可见的东西一起工作。所有浏览器在打印时似乎都尊重行属性。

回答by MILWAUKEE3333

This seems to work for applying to all elements that have overflowing content:

这似乎适用于所有内容溢出的元素：

$("textarea").each(function () {
    var Contents = $(this).val();
    if ($(this)[0].scrollHeight > $(this).height()) {
        $(this).after("<div class='print-helper'>" + Contents + "</div>");
        $(this).addClass("no-print");
    }
});

回答by Kangkan

Define a separate CSS for print media like this <link rel="stylesheet" href="print.css" type="text/css" media="print" />and for the text area, define the overflow attribute as

为这样的印刷媒体定义一个单独的 CSS <link rel="stylesheet" href="print.css" type="text/css" media="print" />，对于文本区域，将溢出属性定义为

overflow: visible;

回答by Geoff Kendall

This is an easy fix with CSS, given that most users aren't really bothered about printing a bit of extra blank space. Just target a minimum height for textareas when printing:

考虑到大多数用户并不真正为打印一些额外的空白而烦恼，这是使用 CSS 的一个简单修复。打印时只针对 textarea 的最小高度：

@media print { 
textarea {
min-height: 500px;  
}
}

Tag that onto the end of your CSS with a min-height that is comfortably enough when you look at it in Print Preview.

使用最小高度将其标记到 CSS 的末尾，当您在打印预览中查看它时，该高度足够舒适。

回答by Igor Jakovljevic

With the usage of pure CSS it is not possible to prepare the textarea for printing.

使用纯 CSS 无法准备用于打印的文本区域。

It is necessary to add some javacript magic to the text area or add a hidden field.

有必要在文本区域添加一些javacript魔术或添加隐藏字段。

There are a couple of solutions, that have been mentioned here:

有几个解决方案，这里已经提到：

1. Hidden paragraph or div
2. Using Javascript to extent the size of the textarea

1. 隐藏的段落或 div
2. 使用 Javascript 来扩展 textarea 的大小

1. Hidden paragraph or div

1.隐藏段落或div

HTML & CSS:

HTML 和 CSS：

<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>

<style>
  .hidden-div{display: none;}
  @media print{
    .hidden-div{display:block;}
  }
</style>

2. Javascript

2. Javascript

You could use a js library e.g https://github.com/thomasjo/jquery-autoresize

您可以使用 js 库，例如https://github.com/thomasjo/jquery-autoresize

$(function() {
    $("textarea").autoResize()
})

回答by Joe

Adding onto Alan'sanswer above, if you have multiple instances of this problem on the same page, then you can use data-* attributes to handle all at once. Sample:

添加到上面艾伦的回答中，如果您在同一页面上有此问题的多个实例，那么您可以使用 data-* 属性一次处理所有问题。样本：

var $printOnlyArr = $('.print-only');
for (var i = 0; i < $printOnlyArr.length; i++) {
  var $printOnly = $($printOnlyArr[i]);
 var textSource = $printOnly.data('textsource');
 if (textSource) {
   $printOnly.text($("#" + textSource).val());
 }
}

.print-only {
 display: none;
}

@media print {
 .print-only {
  display: block;
 }
 .no-print {
  display: none;
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control no-print" maxlength="2000" id="txtAdditionalComments"></textarea>
<div class="print-only" data-textsource="txtAdditionalComments"></div>

回答by Andrew Irwin

I had this same problem. My project is React, I was a semnaticUi TextArea component. The Text that could only be seen by scrolling down in the Textarea aka the "overflow" could not be seen in the print view when I press the print screen button.

我有同样的问题。我的项目是 React，我是一个 semnaticUi TextArea 组件。当我按下打印屏幕按钮时，只能通过在 Textarea 中向下滚动才能看到的文本又名“溢出”无法在打印视图中看到。

Solution:)

解决方案:)

I just used a normal paragraph tag instead and set css white-space: pre-wrapon a div that enclosed the p tag.

我只是使用了一个普通的段落标签，并white-space: pre-wrap在包含 p 标签的 div 上设置了 css 。

Worked for me!

为我工作！