javascript - Textarea自动调整高度

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        3年前关闭。



我需要自动调整文本区域的高度。默认情况下，它将在单行中。在增加文本的同时，高度也需要增加。请用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>

最佳答案

使用textarea上的onkey事件可以轻松完成此操作

function adjustHeight(ctrl) {
  $(ctrl).css({'height':'auto','overflow-y':'hidden'}).height(ctrl.scrollHeight);
}
$('textarea').each(function () {
  adjustHeight(this);
}).on('input', function () {
  adjustHeight(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Your text will come here, This has a long text and it got adjusted according to the content size</textarea>

<textarea placeholder="Type, paste, cut text here..."></textarea>