Textarea auto adjust height

Question

I need to auto adjust the height of text area. By default it will be in single line. while growing the text the height will also needs to be increased. please suggest me with the css. or tell me with simple jave script.

Code is:

<!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>

Questions asking us to **recommend or find a book, tool, software library, tutorial or other off-site resource** are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. *Most [shopping list questions](http://blog.stackoverflow.com/2010/11/qa-is-hard-lets-go-shopping/) fall under this reason.* — Praveen Kumar Purushothaman, May 12 '16 at 16:31
There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs. — Praveen Kumar Purushothaman, May 12 '16 at 16:32
Possible duplicate of [Creating a textarea with auto-resize](http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — Shaggy, May 12 '16 at 17:04

Ranjit Singh · Answer 1 · 2016-05-12T16:38:48.240

7

This can be easily done using onkey event on textarea

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>

edited May 12 '16 at 16:38

answered May 12 '16 at 16:33

Ranjit Singh

3,715
1
21
35

Actually, the first one was better. – Praveen Kumar Purushothaman May 12 '16 at 16:36
@PraveenKumar which one? – Ranjit Singh May 12 '16 at 16:41
Yes, now it looks good. The preloaded content. – Praveen Kumar Purushothaman May 12 '16 at 17:22

score 0 · Answer 2 · answered May 12 '16 at 16:46

0

This can be "faked" by creating a contenteditable container.

fiddle

One thing to keep in mind is that this will no longer be considered a form element so JavaScript is needed to pull the value.

answered May 12 '16 at 16:46

Joe

6,401
3
28
32

Textarea auto adjust height

2 Answers2