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>
分享到:
相关推荐
### textarea元素概述 在网页开发过程中,`textarea`是一个非常重要的HTML元素,主要用于接收多行文本输入。在本文中,我们将详细介绍如何使`textarea`随内容的高度固定而自动增宽,以及宽度固定时如何自动增高,并...
通过`overflow`属性,可以决定当`textarea`内的内容超出其尺寸时的行为。`overflow-x`和`overflow-y`分别控制水平和垂直方向上的溢出行为。例如,设置`overflow-x: hidden;`会隐藏任何超出`textarea`宽度的水平内容...
在网页设计中,`textarea` 是一种常用的表单元素,用于收集用户输入的多行文本。然而,`textarea` 的默认行为可能导致一些视觉上的问题,比如固定的高度可能会限制用户输入,而滚动条则可能破坏页面的整体美感。针对...
本文将深入探讨“jQuery Textarea全屏插件Textarea Fullscreen”,这是一个轻量级的解决方案,用于将网页上的textarea元素转换为全屏模式,提供更好的用户输入体验。 “Textarea Fullscreen”插件,正如其名,旨在...
overflow-y: auto; /* 当内容超过高度时显示滚动条 */ } ``` 结合CSS的`max-height`属性,我们还可以限制`textarea`的最大高度,防止其无限制地增长: ```css textarea { max-height: 200px; /* 设置最大高度 */...
在网页开发中,`textarea` 是一个常用的元素,用于接收用户输入多行文本。然而,原始的 `textarea` 没有内置的功能来显示行号,这对于需要进行代码编辑或者查看多行文本的场景来说不够友好。为了提高用户体验,...
确保设置了`overflow-y: hidden`以隐藏滚动条。 5. **防止无限增长**:为了防止textarea无限增长,可以设定一个最大高度,当达到这个高度时停止自动扩展。 压缩包文件“phoetry-textareaAutoHeight-20d2639”可能...
<textarea cols="40" rows="10" name="text" style="overflow:auto"></textarea> ``` 此例中,当输入文本超过10行时,文本框将自动显示滚动条,便于用户查看完整内容。 3. **自定义背景色**: ``` <textarea ...
默认情况下,Chrome 和其他基于 WebKit 的浏览器允许用户通过拖动textarea的角落来调整其大小,这在某些场景下是实用的,但并不总是符合设计师对页面布局的预期。有时,保持页面的统一性和美观性更为重要,因此需要...
在网页开发中,文本区域(`textarea`)是常见的用户输入元素,用于收集大量文本信息。然而,其默认的滚动条样式在不同浏览器之间存在差异,可能不符合设计师的美观要求或网站的整体风格。本文将详细介绍如何使用...
### textarea换行符处理 在Web开发中,`textarea`元素是HTML中用于接收多行文本输入的一个常用组件。在用户通过`textarea`输入文本时,可能会遇到换行符(通常为`\r\n`)的问题。这些换行符在不同的环境中可能会被...
关于Textarea的换行问题,是前端开发中一个常见的议题,特别是在处理用户输入的多行文本时。在HTML中,Textarea是一种允许用户输入多行文本的表单控件,其换行处理方式对于用户体验和数据存储至关重要。然而,在这段...
小编最近遇到这样的需求,移动端的h5页面,要求有一排可选择的卡片, 超出容器部分可以左右滑动,同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法,需要的朋友参考下吧
overflow: auto;" onkeyup="checkLimits(myForm.myText, myForm.myChars, myForm.myLines);" onpaste="checkLimits(myForm.myText, myForm.myChars, myForm.myLines);" oncut="checkLimits(myForm.myText, ...
在这样的背景下,`textarea` 的字数限制功能显得尤为重要。 在`jQuery`(JQ)这个流行的JavaScript库的帮助下,我们可以方便地实现`textarea`的字数限制功能。`jQuery`提供了强大的选择器、事件处理和DOM操作功能,...
在开发Web应用时,有时我们需要实现一种功能,即在用户输入textarea时实时截取文本,这在例如富文本编辑器、聊天应用或者实时预览文本格式的场景中非常常见。Vue.js是一个流行的JavaScript框架,它提供了响应式的...
### Textarea长度控制详解 #### 一、简介 在网页开发过程中,经常需要对用户输入的数据进行限制,特别是在文本域(`textarea`)中的输入,为了确保数据的有效性和减轻服务器负担,通常会设置一个最大输入长度。...
处理`textarea`中的换行和空格通常涉及到用户输入的格式化和处理,这在多个场景下都是必要的,例如数据存储、表单提交或者富文本编辑等。本篇文章将深入探讨如何在JavaScript或相关前端技术中处理`textarea`的换行和...
在Vue.js框架中,开发网页应用时,我们经常会遇到需要创建一个可以自动调整高度的textarea元素,以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...
最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...