Javascript 文本区域自动调整高度_Javascript_Html_Css

Javascript 文本区域自动调整高度

javascript html css

Javascript 文本区域自动调整高度,javascript,html,css,Javascript,Html,Css,我需要自动调整文本区域的高度。默认情况下，它将在单行中。在增加文本的同时，还需要增加高度。请建议我使用css。或者用简单的jave脚本告诉我代码是： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <style> textarea { resize: n

我需要自动调整文本区域的高度。默认情况下，它将在单行中。在增加文本的同时，还需要增加高度。请建议我使用css。或者用简单的jave脚本告诉我

代码是：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
textarea {
    resize: none;
    overflow: auto;
    min-height: 24px;
    max-height: 100px;
}
 #url{   word-break: break-all;
    font-family: 'Lato', sans-serif;
    cursor: text;
    resize: none;
    height: 24px;
    font-size: 14px;
    line-height: 22px;
    background-color: transparent;
    border: 0;
    margin-top: 6px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
    width:500px}
</style>
<body>
<textarea readonly id="url">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea>
<div>
                                                    Where does it come from?</div>
</body>

</html>


无标题文件
文本区{
调整大小：无；
溢出：自动；
最小高度：24px；
最大高度：100px；
}
#url{wordbreak:break all；
字体系列：“Lato”，无衬线；
光标：文本；
调整大小：无；
高度：24px；
字体大小：14px；
线高：22px；
背景色：透明；
边界：0；
边缘顶部：6px；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
文字装饰：无；
宽度：500px}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它来自哪里？

这可以通过在textarea上使用onkey事件轻松完成

功能调整高度（ctrl）{
$（ctrl.css（{'height'：'auto'，'overflow-y'：'hidden'}）.height（ctrl.scrollHeight）；
}
$（'textarea'）。每个（函数（）{
调整高度（此）；
}).on（'input'，function（）{
调整高度（此）；
});

您的文本将出现在这里，这是一个长文本，它根据内容大小进行了调整
这可以通过创建contenteditable
容器来“伪造”

需要记住的一点是，这将不再被视为表单元素，因此需要JavaScript来获取价值。
要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。大多数都属于这个原因。可能的答案太多，或者好的答案对于这种格式来说太长。请添加详细信息以缩小答案集或隔离一个可以在几段中回答的问题。可能的重复事实上，第一个更好。@PraveenKumar哪一个？是的，现在看起来不错。预加载的内容。