Print when Textarea has overflow-优快云博客

本文详细介绍了如何利用HTML、CSS和JavaScript技术，在网页内容进行打印时，将文本区域的内容平滑过渡到打印辅助元素上，并确保打印样式表仅在打印时生效。通过实现这一功能，可以提升用户体验，特别是对于需要打印长篇文档的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hi All,

I’d like to simply share to spread the knowledge, what I have been looking for this lately.
This is used in one of my projects at work, so far this code looks good on different
browsers (it’s been successfully tested on Firefox 27.0.1, IE 8.0, Chrome 26.0.1410.64 m, Opera 12, Safari 4.0.5)

I got this code from stackoverflow.

[b]HTML[/b] - put a DIV behind the textarea, which only be used during print..


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

[b]CSS (All / Non Print)[/b]


<style type="text/css" media="all">
	/* Styles for all media */
	#print_helper {
	  display: none;
	}
</style>

[b]CSS (Print)[/b] - use 'media="print"' can help the CSS only take effect during print..


<style type="text/css" media="print">
  /* Styles for print */
	#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;
	}
	#print_placeholder:after {
		content: "The print stylesheet has been applied. ✓";
		display: inline;
	}
</style>

[b]Javascript (JQuery)[/b] - make sure the "copy_to_print_helper()" be called before print, which help to sync the content in textarea to DIV, and finally print the DIV instead of textarea.


<script type="text/javascript" src="http://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();
  });
  copy_to_print_helper();
});
</script>