关于textarea打印问题

来源：互联网发布：高颜值耳机知乎编辑：程序博客网时间：2024/05/16 19:43

遇到的问题

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.oninput= //非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的格式显示

1 0