自动调整动态创建的文本区域的高度

Question

我已经动态创建了一个文本区域。我从数据库中收到了它的内容。文本区域具有固定宽度。如何使用纯 JavaScript 垂直调整大小以适应其所有内容？

let field         = document.createElement('textarea');

field.value       = "Long text received from database";
field.style.width = 650 + "px";

现在，如何设置字段的高度以使其所有内容都可见？

Answer 1

这里有一个解决方案，也许它不是最好的。这个想法是检查元素是否有滚动条，当元素有滚动条时，我们添加像素直到没有滚动条。

var textarea = document.getElementById('myTextArea');

var hasVerticalScrollbar = textarea.scrollHeight > textarea.clientHeight;

while(textarea.scrollHeight > textarea.clientHeight){
textarea.style.height = textarea.offsetHeight + 10 +'px' ;
}

这里有完整的例子https://jsfiddle.net/sgtac43o/

Answer 2

这也可能是一种解决方法，动态创建一个具有 textarea 的所有相同 css 属性的 div 并获取它的高度，并使用一些缓冲区将高度设置为该 textarea 并删除 div。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height, viewport-fit=cover">
    <title>Highlight Text while typeing in input box</title>
    <style>
        body * {
            box-sizing: border-box;
            font-family: verdana;
        }
        .ta {
            width: 600px;
            min-height: 150px;
            padding: 10px;
            font-size: 13px;
            font-family: verdana;
        }

        .invisibleDiv {
            width: 600px;
            min-height: 150px;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 13px;
            font-family: verdana;
            opacity: 0;
        }
    </style>
</head>
    <body>

        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
        <textarea class="ta"></textarea>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            var longPara = $('p').text();
            var apprxHeight = 0;
            var invisibleDiv = $( "<div/>", {
                html: longPara,
                "class": 'invisibleDiv'
            })

            $.when($('body').append(invisibleDiv)).done(function() {
                var apprxHeight = getHeight();
            });

            function getHeight() {
                apprxHeight = $('.invisibleDiv').innerHeight() + 10;
                $('.ta').innerHeight(apprxHeight).val(longPara);
                $('.invisibleDiv').remove();
            };

        </script>
    </body>
</html>

你可以在这里查看https://codepen.io/silabhijit/pen/xjjgyv 您也可以将 textarea 替换为可编辑的 div。