Is there a way to make a textbox auto expand without jQuery?

Question

I have set resize to vertical but I would like that when the user fills the textbox then its size expands down. Is there any way this can be done without using an external library like jQuery?

Possible duplicate of [dynamically increase input type text textbox width according to the characters entering into it](http://stackoverflow.com/questions/20727692/dynamically-increase-input-type-text-textbox-width-according-to-the-characters-e) — Gaurav Aggarwal, Aug 03 '16 at 08:34
Please add a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of your code — Jamie Barker, Aug 03 '16 at 08:40
Possible duplicate of [Creating a textarea with auto-resize](http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — Martin Braun, Aug 03 '16 at 08:48

score 4 · Answer 1 · answered Aug 03 '16 at 08:52

4

Only in CSS and contentEditable="true" attribute.

div {
display:inline-block;
border: solid 1px #000;
min-height: 200px;
width: 300px;
}

Demo Here

answered Aug 03 '16 at 08:52

Ranjan

929
1
6
19

score 1 · Accepted Answer · edited May 23 '17 at 12:01

This has been answered here already: Creating a textarea with auto-resize

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

Example: https://jsfiddle.net/hmelenok/WM6Gq/

Credits go to panzi, vote him up here: https://stackoverflow.com/a/5346855/1540350

Is there a way to make a textbox auto expand without jQuery?

2 Answers2