欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Print when Textarea has overflow

程序员文章站 2022-06-07 15:26:26
...
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 *.

HTML - 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>


CSS (All / Non Print)
<style type="text/css" media="all">
	/* Styles for all media */
	#print_helper {
	  display: none;
	}
</style>


CSS (Print) - 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>


Javascript (JQuery) - 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>