Asked 17/1, 2009 at 22:30 Answered 10/4 at 7:56

Solved javascript html resize height textarea

534

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the textarea, not its contents.

The code from that page is below:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

Tithonus answered 17/1, 2009 at 22:30 Comment(4)

possible duplicate of Autosizing textarea using prototype – Wimsatt 27/8, 2014 at 14:28

I created a package for this if you are using react: npmjs.com/package/react-fluid-textarea – Senegambia 3/12, 2017 at 0:8

Sort and Sweet answer here : https://mcmap.net/q/74843/-textarea-to-resize-based-on-content-length-duplicate function textAreaAdjust(o) { o.style.height = "1px"; o.style.height = (25+o.scrollHeight)+"px"; } <textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea> – Lice 4/1, 2020 at 12:6

Using CSS (and a wrapper element) only: css-tricks.com/the-cleanest-trick-for-autogrowing-textareas – Afterdamp 9/2, 2022 at 12:47

276

This works for me (Firefox 3.6/4.0 and Chrome 10/11):

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();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

If you want try it on jsfiddle It starts with a single line and grows only the exact amount necessary. It is ok for a single textarea, but I wanted to write something where I would have many many many such textareas (about as much as one would normally have lines in a large text document). In that case it is really slow. (In Firefox it's insanely slow.) So I really would like an approach that uses pure CSS. This would be possible with contenteditable, but I want it to be plaintext-only.

Floorage answered 18/3, 2011 at 0:21 Comment(16)

This unfortunately fails in IE8, and since it uses overflow: hidden it leaves IE users with no fallback plan. You could toggle overflow on and off to resolve that, but then the scrollbar loses its mind. If you don't use overflow: hidden the textarea doesn't shrink. Close though! – Lozada 10/5, 2011 at 6:14

Using IE tester the code above even works with IE 5.5. I didn't test with IE 9 because I only have XP installed in my VirtualBox. – Floorage 10/5, 2011 at 18:42

It does! Made a jsfiddle for ya: jsfiddle.net/CbqFv It now works in Chrome, Firefox, and IE8 - although it is a little glitchy in IE8. As you increase or decrease number of lines it freaks out a little. As you might have seen in the autoresize plugin for jQuery, they work around that by cloning the textarea, setting its height to auto instead of the original, then using that to set scrollheight on the original. I did that in this updated fiddle: jsfiddle.net/CbqFv/2 It solves the IE issue but Firefox stops working. – Lozada 10/5, 2011 at 18:58

Thanks, but I see it's using an id='text' to search for the DOM. But I can't use the same Id for more than one textarea, so how do I change it to a class that can be used by others? Thanks again. – Veilleux 18/2, 2012 at 8:45

@HelenNeely: Then don't use an id. E.g. use a class and do what init does for all elements of that class. That should be a beginners task. – Floorage 23/2, 2012 at 4:28

If you want to target modern browsers, you don't need to attach the handler to all those events. Just attach to input or oninput event. – Aurilia 20/9, 2012 at 18:40

@DenilsonSá If one could only assume that only modern browsers are used the web would be a better place. – Floorage 22/9, 2012 at 1:52

Does this work if I have multiple textboxes that require the feature? – Springe 26/3, 2014 at 20:39

This won't work well if a scrollbar is envolved in IE11. If you use this fiddle jsfiddle.net/CbqFv and enter lines until you've got a scrollbar you will see it. Any ideas? – Ptolemy 25/8, 2015 at 13:5

kaljak, does adding overflow: hidden; help? Edit: Wait, that is already there. Then no idea. – Floorage 25/8, 2015 at 14:37

What can I do for prevent scroll bar flashing? If the style overflow:auto; – Mini 8/4, 2016 at 23:12

@Mini Maybe use an visibility:hidden;position:fixed; textarea/div to measure the height? Or use a contentEditable="true"-div instead of a textarea (which complicates other things heavily). – Floorage 9/4, 2016 at 19:2

This breaks completely if the textarea is near the bottom page end - everything jumps back and forward due to style.height='auto'. I suspect the solution is to add a hidden sibling used only for measurement. – Bevash 12/6, 2016 at 9:3

would it hang the browser if pasted large text inside like 3MB file after uploading and getting the response back into the textarea – Spoilt 11/9, 2019 at 10:28

On Firefox 70 it doesn't resize on first character that overflows. On second char it gets resized. – Goines 2/12, 2019 at 21:15

This works fine on JSFuddle, but I'm wondering (as I have such task to do) how it does behave if you increasing and decreasing the font size from the browser settings. Also across different languages? – Crespo 28/5, 2020 at 7:54

661

A COMPLETE YET SIMPLE SOLUTION

Updated 2023-06-08 (Added native js for updating via js injection)

The following code will work:

On key input.
With pasted text (right click & ctrl+v).
With cut text (right click & ctrl+x).
With pre-loaded text.
With all textareas (multiline textboxes) site wide.
With Firefox (v31-109 tested).
With Chrome (v37-108 tested).
With IE (v9-v11 tested).
With Edge (v14-v108 tested).
With IOS Safari.
With Android Browser.
With JavaScript strict mode.

OPTION 1 (With jQuery)

This option requires jQuery and has been tested and is working with 1.7.2 - 3.6.3

Simple (Add this jQuery code to your master script file and forget about it.)

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle

OPTION 2 (Pure JavaScript)

Simple (Add this JavaScript to your master script file and forget about it.)

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle

OPTION 3 (jQuery Extension)

Useful if you want to apply further chaining to the textareas, you want to be auto-sized.

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ "height": 0, "overflow-y": "hidden" })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on("input", function() {
        autoHeight_(this);
      });
    });
  }
});

Invoke with $("textarea").autoHeight()

UPDATING TEXTAREA VIA JAVASCRIPT

When injecting content into a textarea via JavaScript, append the following line of code to invoke the resize function.

jQuery

$("textarea").trigger("input");

Pure JavaScript

document.getElementsByTagName("textarea")[0].dispatchEvent(new Event('input', { bubbles: true }));

PRESET TEXTAREA HEIGHT

To fix the initial height of the textarea you will need to add another condition:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");

for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Jayson answered 2/9, 2014 at 10:31 Comment(49)

This is a great solution, it would be slightly more understandable if the method name and parameter name were updated to be true names instead of individual letters. – Erasmoerasmus 3/10, 2014 at 15:34

It's quite strange that when I use $("#xxx").val("xxx").trigger("input"), it does trigger the input event, however the .scrollHeight attribute still returns 0. I don't understand. lol – Seline 30/8, 2016 at 9:44

@Seline I can't say I noticed that before. Does this impact on what you are trying to achieve? Are you reading the value after the trigger event has completed? You could use a callback function at the end of the function. – Jayson 30/8, 2016 at 10:47

@Obsidian I had to use Math.max(40, e.scrollHeight) to avoid a 0 height. As for the callback, could you give me more details? I have no idea how to apply a callback here. – Seline 30/8, 2016 at 10:56

@Seline I updated the fiddle to test for scrolleight. If checked during the callback of the input the scroll height reads correctly. See the alert here on input. jsfiddle.net/n9uuv0hd/8 – Jayson 30/8, 2016 at 12:23

@Obsidian Thanks! I just figured out why I always get a 0 —— I put the textarea in a Bootstrap modal! As the modal is hidden at first, textarea in it will have a 0 scrollHeight 😂😂 – Seline 31/8, 2016 at 4:3

@Obsidian Fantastic!! (Option 3). The this.style.height = 'auto'; is the magic behavior fix. I was so frustrated why the scrollHeight was so weird in behavior. The height to auto, then matching the scrollHeight in the same render cycle still blows my mind how it 'fixes' this issue though it should only be technically painting the second height. – Yeeyegg 29/9, 2016 at 16:49

I tried option 3 in Chrome today and had to make a couple tweaks. 1) It won't always resize down correctly if you have a "height" or "all" transition on the textarea. I'd recommend not using transitions that affect height. 2) The scrollHeight was returning a minumum of two rows worth of height (perhaps because that's the default for textareas in Chrome) but if you change this.style.height = 'auto'; to this.style.height = '0px'; and add a min-height to prevent the initial state from actually going to 0, scrollHeight will correctly return one row of height when appropriate. – Thirteenth 30/9, 2016 at 14:8

@Obsidian Can you explain how this.style.height = 'auto'; fixes the behaviour of scrollHeight? It's just magic. – Meaningful 25/8, 2017 at 6:5

@Meaningful Simply: Using auto first simply allows the height of the textarea to be reset to the correct height of its content before the changes are made using scrollheight. – Jayson 25/8, 2017 at 8:14

Few things: I use the first option in a modal. On mobile, it changes scroll in weird way when typing, which is annoying. Second: Page up/down buttons do not work with this script. – Diplomacy 3/9, 2017 at 12:25

@Soaku Please can you provide an example as I have no issue with either of the points you mention but I want the script to be as effective as possible so if there are issues I would like to fix them. – Jayson 4/9, 2017 at 8:8

@Obsidian Have you tried using the textara with text spanning more than 100% screen height? Then the first glitch occurs, – Diplomacy 4/9, 2017 at 8:39

@Soaku yes, jsfiddle.net/n9uuv0hd/94 works fine in chrome and operates as textarea home end in firefox. Can you create a fiddle with your problem? – Jayson 4/9, 2017 at 9:12

@Obsidian Actually, the bug is present in your fiddle. When I type, the scroll is "teleported", so the pointer is right in top of the keyboard, when I press "enter", it returns to previous position. – Diplomacy 4/9, 2017 at 9:24

@Obsidian Unfortunately it seems like because of this.style.height = 'auto'; CSS transitions on height don't work. I can either have transitions working and resizing on deleting lines broken or transitions not working and resizing on deleting lines working. Any workarounds? – Meaningful 11/1, 2018 at 4:27

@Meaningful Yes it is a difficulty I have yet to overcome. Although I found that transitioning the height, although looked good was not well received by my customer base. In this case speed over style was better! – Jayson 11/1, 2018 at 11:30

elem[0].scrollHeight may help for the case elem.scrollHeight does not work – Kwangju 29/1, 2018 at 11:41

Why is mine not working? Does it work in react too? I include the main.js file in the index.html but it doesn't work somehow. It looks like the function is not being called – Danita 18/9, 2019 at 10:13

@KittichoteKamalapirat if you create a new question showing an example of your current code, I would be happy to try and help you with it. For now I would make sure jQuery is initialised before your main.js file. I would then verify that your entire main.js file has no errors because a single missed semi-colon would cascade failure through your document. – Jayson 19/9, 2019 at 7:43

@Jayson Thanks for the response. I have added the question here, please check it out. Let me know if the info I provided was not enough #58008893 – Danita 19/9, 2019 at 9:56

For some reason my textarea stays at 0px on pageload even with preloaded text. I can see that it works in the jsfiddle example (Option 1) but I have the exact same code in my app and it don't work. :-( It works when I type in the textarea but it doesn't work on page load. – Aintab 2/1, 2020 at 17:39

@Aintab Then you must have other conflicting code in your app. This is likely css or Javascript. Try using the browsers web console while running your app to see what is applying the height to the textarea. – Jayson 3/1, 2020 at 9:7

There still is a use case not answered by your example: if the initial textarea height is not the auto one? An empty textarea is two rows height. If I take the jsfiddle of your second example and add an initial style="height: 33px" to the empty textarea, you'll see that your code breaks the height of the textarea, making it two rows again... – Bothy 24/4, 2020 at 22:19

@fla The code doesn't break it does what it's been programmed to do. Setting an inline style height will be ignored by the script due to specificity. If you wanted a default height for the empty field then you would need to add a caveat in the javascript function to check for empty content and then set the inital height differantly. e.g jsfiddle.net/fxre1zm5 – Jayson 29/4, 2020 at 10:56

It's not about empty content, it's about one line only textarea. The textarea height is supposed to be the content height. If my content is on one line only, the textarea height should be one line, not two. – Bothy 1/5, 2020 at 11:44

@fla An input with type="textarea" is multiline by default however you can change the deaault behaviour using my suggestion. Did this not work for you? – Jayson 4/5, 2020 at 9:25

if anyone has trouble with initial height of textarea just get and set height ONLY after setting overflow hidden $el.style['overflow-y'] = 'hidden'; $el.style.height = $el.scrollHeight + 'px'; – Incision 13/5, 2020 at 16:4

I used the "pure javascript" one. It works really well, and definitely helped me. Thanks! Funnily enough I couldn't get the other answer's version to work, so I'm quite glad you added this. – Atop 21/2, 2021 at 19:28

The height with one line of text can be reduced to a single line by setting rows="1". Also, watch out for any answer (including this one) that directly manipulates the height of the textarea to calculate the final height: current versions of iOS Safari have a bug in which scrolling will jump up and down erratically as you enter newlines in a tall textarea as it attempts to keep the textarea in the view. You can use an invisible, second textarea for the calculations to fix this. Also consider that width changes, caused by page size changes, etc, may affect the ideal height. – Ragsdale 9/9, 2021 at 21:12

To avoid the scroll position changing when the textarea height was more than 100% of the window height, I store the pageYOffset at the start of OnInput and then if the pageYOffset is greater after setting the height, then I reset it to the starting pageYOffset. Works a treat. jsfiddle.net/L8259hod – Airspeed 24/9, 2021 at 3:23

At least in current Firefox (93), this is really slow because it reads and changes each one, and that forces a reflow for the page. In a related post which I can't find now, someone pointed out that what you want to do is read ALL the scrollHeight values, and then set ALL the style attributes without reading anything. In current Firefox, this strategy is waaaaay faster. – Lichi 19/10, 2021 at 16:5

@SamBayer by "really slow" what are you talking about (milliseconds?) because I use this on Firefox everyday on all my applications and the thought it was slow never occurred to me. – Jayson 21/10, 2021 at 7:25

I have used solution two and it works except when moving between tabs created. I don't know why textareas that are not visible directly on the page is not autosized until I type in them. Does this method not work on textareas not visible from page load? – Isfahan 18/2, 2022 at 13:53

@Isfahan A textarea that is invisble on the page has an initial height of 0. When your tab changes to it the textarea will become visible but the height is still 0. To fix this you need to trigger the routine on tab change. (See UPDATING TEXTAREA VIA JAVASCRIPT part of answer) – Jayson 18/2, 2022 at 14:5

@Jayson I tried that now and it didn't work. I see there is a way to preset the height of the boxes but is there a way to preset it to auto height? Can I modify the "PRESET TEXTAREA HEIGHT" to work with auto height? – Isfahan 21/2, 2022 at 9:18

@Isfahan The code will work, I came accross the same issue myself previsouly. Create a separate question with your code in and I will see if I can assist. – Jayson 21/2, 2022 at 10:19

Created a qustion: #71207189 @Jayson Thanks for taking your so far time. – Isfahan 21/2, 2022 at 12:56

Instead of using "auto" for the initial height, you can also use 0. – Tiflis 29/6, 2022 at 20:50

@Thirteenth 's suggestion should be incorporated into the answer. Without it, the solution is essentially broken for line sizes of 1. – Cardsharp 25/8, 2022 at 17:7

@Cardsharp Doesn't the PRESET TEXTAREA HEIGHT option accomodate for this requirement? – Jayson 26/8, 2022 at 8:3

No, the PRESET TEXTAREA HEIGHT is about setting the initial height of the element. ZorroDeLaArena's suggestion #2 is about height: auto giving the textarea 2 lines when only 1 is needed (at least in Chrome). He suggested using 0 for the height rather than auto, and setting a min-height on the element. I just used 1rem for the height and didn't need a min-height. In short: change "auto" to "0" or "1rem" and the code works better in the case where only one line is needed in the textarea. – Cardsharp 26/8, 2022 at 16:15

@Cardsharp OK thanks. I have tested the findings and ammended the answer to accomodate. – Jayson 30/8, 2022 at 10:9

@DreamTeK, can you help me with this question, I try to convert your answer to ReactJS #73917449 – Pule 1/10, 2022 at 8:41

You capture onInput here, but not the form's onReset event. So textareas won't resize if you reset the form they're in! – Zipper 17/11, 2022 at 11:29

I would also change the .on("input") to .on("focus") so that it resizes as soon as you put your cursor in the input. – Aintab 23/2, 2023 at 23:11

@Vincent, but the size won't change until the content is edited. – Jayson 24/2, 2023 at 9:19

you should stop resizing the box if the user manually resizes it – Viscosity 7/6, 2023 at 15:58

@BorisVerkhovskiy that's a good idea, but I think it would need to be optional. – Jayson 8/6, 2023 at 7:47

276

This works for me (Firefox 3.6/4.0 and Chrome 10/11):

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();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>