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

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

javascript

Javascript 自动调整动态创建的文本区域的高度,javascript,Javascript,我已经动态创建了一个textarea。我已经从数据库收到了它的内容。文本区域具有固定宽度。如何使用纯javascript垂直调整其大小以适应其所有内容 let field = document.createElement('textarea'); field.value = "Long text received from database"; field.style.width = 650 + "px"; 现在，如何设置字段的高度，使其所有内容都可见？这里有一个

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

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

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

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

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

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

var hasVerticalScrollbar = textarea.scrollHeight > textarea.clientHeight;

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

这里的完整示例

这也可能是一种解决方法，动态创建一个具有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>


在输入框中键入时突出显示文本
正文*{
框大小：边框框；
字体系列：verdana；
}
助教{
宽度：600px；
最小高度：150px；
填充：10px；
字体大小：13px；
字体系列：verdana；
}
.看不见{
宽度：600px；
最小高度：150px；
填充：10px；
位置：绝对位置；
底部：0；
左：0；
字体大小：13px；
字体系列：verdana；
不透明度：0；
}
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。以下是自1500年代以来使用的Lorem Ipsum的标准块，供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制，并附有H.Rackham 1914年翻译的英文版本。与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。以下是自1500年代以来使用的Lorem Ipsum的标准块，供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制，并附有H.Rackham 1914年翻译的英文版本。

var longPara=$（'p'）.text（）；
var-apprxHeight=0；
变量invisibleDiv=$（“”{
html:longPara，
“类”：“不可见的eDiv”
})
$.when（$（'body'）.append（invisibleDiv））.done（function（）{
var apprxHeight=getHeight（）；
});
函数getHeight（）{
apprxHeight=$（'.invisibleDiv'）.innerHeight（）+10；
$（'.ta'）。内部高度（近似高度）.val（长段）；
$（'.invisibleDiv'）.remove（）；
};

你可以在这里查一下

您还可以用可编辑分区替换textarea。

使用

Javascript

是一条漫长的道路。您需要获取

光标的位置。以及行的高度
。为什么-不-纯CSS
<代码>高度：自动
。这可能有助于textarea，最小高度：100px工作，但高度：自动不工作。执行行字段后。value=“从数据库接收的长文本”；，字段的高度和宽度属性为零。field.clientHeight=0，field.scrollHeight=0，field.offsetHeight=0@SukantaManna add document.body.appendChild（field）；或者类似的，这里是完整的示例let textAreas=div1.childDiv.getElementsByTagName（'textarea'）；for（设i=0；i