Print when Textarea has overflow

最新推荐文章于 2025-12-01 21:03:28 发布

最新推荐文章于 2025-12-01 21:03:28 发布 · 194 阅读

文章标签：

#textarea #print #overflow #css #jquery #ViewUI

frontend 专栏收录该内容

1 篇文章

订阅专栏

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

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>