当前位置:首页 > 开发 > Web前端 > Ext > 正文

Print when Textarea has overflow

发表于: 2014-03-27   作者:cuishen   来源:转载   浏览:
摘要: 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 (
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.

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>

Print when Textarea has overflow

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号