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>
