遇到的问题

textarea 的高度不能自适应，当文本的内容超出文本框时，会出现滚动条，而且部分内容不能显示

如果textarea文本是只读的情况

js调节文本框的高度

document.addEventListener("DOMContentLoaded",function(){var elem=document.getElementById("#id");elem.style.height = elem.style.scrollHeight + "px";},false)

这样textarea就会根据文本的大小自动调节高度。但是我遇到了问题是：网页上显示的正常，但是打印预览的时候发现，textarea中的最后一行会显示不出来。

利用div替换textarea

利用div代替textarea可以实现高度的自适应，但需要解决：如何实现文本的自动换行

css ：

 .printDIV{text-align:left;width:100%;height:100%;}

JS：

  var div= document.getElementById("#div");div.innerHTML = div.innerHTML.replace( /\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g,"<br>");

这里需要把从数据库返回的换行符转换为html 的换行符"<br>"；

textarea如果可写

这时候textarea应该要根据文本的输入，自适应高度。这里的关键是建立一个hidden的同样大小的shadow，用于计算高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>文本框高度自适应</title><style type="text/css">#shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; }#shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; }#text { resize: none; }</style>
</head>
<body>
<textarea id="text"></textarea>
<textarea id="shadow"></textarea>
<script type="text/javascript">window.onload = function () {var text = document.getElementById("text"); //用户看到的文本框var shadow = document.getElementById("shadow"); //隐藏的文本框text.οninput= //非IE的text.onpropertychange = //IE的onchange;function onchange() {shadow.value = text.value;setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入function setHeight() { text.style.height = shadow.scrollHeight + "px"; }}};
</script>
</body>
</html>

直接把textarea的文字插入div中

这是可以调用div.innerHTML = textarea.innerHTML,这样就可以实现div按照textarea的格式显示

关于textarea打印问题相关推荐

处理jquery.jqprint.js不能打印input、textarea区以及样式问题
处理jquery.jqprint.js不能打印input.textarea区以及样式问题对于打印区的input和textarea做一下处理: 处理打印样式问题(打印样式与显示样式不一样) 对于打印区 ...
vue 打印 canvas 显示空白
最近在弄 vue + elemnet 打印报表,然后有个需求就是直接打印将 echarts 表也打印出来,我下载上打印插件后,在打印页面发现 echarts 图表部分为空白,再仔细检查发现这个插件不 ...
如何使用JavaScript漂亮地打印JSON？
如何以易于阅读的格式(对人类读者而言)显示JSON? 我主要是在寻找缩进和空格,甚至可能是颜色/字体样式/等. #1楼出于调试目的,我使用: console.debug("%o" ...
webview检测html事件,在JavaFX WebView中检测HTML textarea onkeyup事件
小编典典如果尝试将JavaFX TextArea对象的内容打印到WebView中,则应将侦听器添加到TextArea而不是WebView. 如果尝试在WebView的HTML页面内的HTML Tex ...
打印机支持打印html页面吗,vue下调用打印功能，打印html页面
wo我今天翻博客,csdn上面有一篇关于我之前记录的工具函数打印html元素的js工具函数没了.我纳闷了,csdn就不重新补了,换掘金来记录. 主要解决: 会有项目需求说要求在html页面下调用打印机 ...
java （lodop）打印实例
首先在lodop官网下载相关文件(js.css等):http://www.lodop.net/download.html 在下载好的包里除了html页面其他的js.css等拷贝到项目的一个目录下. ...
兼顾pc和移动端的textarea字数监控的实现方法
概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...
java textarea append_JavaFX TextArea.append()导致java.lang.NullPointerException
我正在读取一个串口并将其写入文本区域作为滚动值.我创建了SerialPortReader类,它运行良好.我的主代码只是调用"updateTextArea()"来告诉类textare ...
java 打印预览_java打印和打印预览机制实例代码
代码如下: import java.awt.basicstroke; import java.awt.borderlayout; import java.awt.color; import java. ...

关于textarea打印问题