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>
分享到:
相关推荐
小编最近遇到这样的需求,移动端的h5页面,要求有一排可选择的卡片, 超出容器部分可以左右滑动,同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法,需要的朋友参考下吧
css textarea textarea 样式
textarea 随内容高度固定,自动增宽;宽度固定,自动增高; 以及 wrap 的几种属性简介。
textarea 元素 textarea 元素 01 textarea 元素 textarea 元素 <textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 描述 <textarea> 标记定义多行的文本输入控件。有两个比较重要的属性cols...
Textarea Fullscreen是一个jquery插件大小只有5K,可以将textarea设置为全屏模式,
js实现textArea滚动条样式,兼容多种浏览器
最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...
textarea长度控制
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候,我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动textarea的大小
为原始的HTML页面中的textarea框加入行号,替代一些复杂的文本编辑器
Textarea Autosize:根据内容的大小自动调整Textarea
textarea换行符 在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显示的\r\n替换...
textarea剩余字数
textarea style="overflow:hidden"></textarea> 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条 要设置textarea文本域的滚动条是否开启,使用style.overflow-x属性来控制。如:如果要...
textarea焦点
textarea全屏代码,真实,有效,安全.
vue结合html实时截取textarea文本,获取鼠标下标,截取自定义文本,不错的demo
在textarea光标处插入文本