关于textarea打印问题

最新推荐文章于 2024-03-25 15:18:15 发布

vuturn

最新推荐文章于 2024-03-25 15:18:15 发布

阅读量4.1k

点赞数 2

分类专栏： javascript 文章标签： textarea打印 textarea高度自适应 div文本换行

本文链接：https://blog.csdn.net/vuturn/article/details/50176439

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

遇到的问题

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>