Textarea Auto height [duplicate]

Active3 hr before
Viewed126 times

8 Answers


This using Pure JavaScript Code.,I want to make height of textarea equal to height of the text within it (And remove the scroll bar),Autosizing textarea using Prototype,Computational Science

function auto_grow(element) {
   element.style.height = "5px";
   element.style.height = (element.scrollHeight) + "px";
textarea {
   resize: none;
   overflow: hidden;
   min - height: 50 px;
   max - height: 100 px;
<textarea oninput="auto_grow(this)"></textarea>
load more v

By default, <input> and <textarea> elements don’t change size based on the content they contain. In fact, there isn’t any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always ways. ,What about the idea that form data is often serialized and sent along, while the code that’s doing it probably isn’t looking for a span?,We can make any element editable and input-like with the contenteditable attribute:,I was thinking about this after Remy Sharp blogged about it recently in the context of inline <input> elements.

We can make any element editable and input-like with the contenteditable attribute:

<span class="input" role="textbox" contenteditable>
load more v

Create an invisible clone div,Grab the content loaded into the textarea,Give the clone the same width and typographical properties as the textarea,Place the content into the clone

Here is the CSS I’ll be applying to the hidden clone element via JavaScript:

.hiddendiv {
   display: none;
   white - space: pre - wrap;
   word - wrap: break -word;

Now for the JavaScript! I’ve commented the code in the block below as well as in the CodePen demo, so you can follow what’s happening:

// Targets all textareas with class "txta"
let textareas = document.querySelectorAll('.txta'),
    hiddenDiv = document.createElement('div'),
    content = null;

// Adds a class to all textareas
for (let j of textareas) {

// Build the hidden div's attributes

// The line below is needed if you move the style lines to CSS
// hiddenDiv.classList.add('hiddendiv');

// Add the "txta" styles, which are common to both textarea and hiddendiv
// If you want, you can remove those from CSS and add them via JS

// Add the styles for the hidden div
// These can be in the CSS, just remove these three lines and uncomment the CSS
hiddenDiv.style.display = 'none';
hiddenDiv.style.whiteSpace = 'pre-wrap';
hiddenDiv.style.wordWrap = 'break-word';

// Loop through all the textareas and add the event listener
for(let i of textareas) {
  (function(i) {
    // Note: Use 'keyup' instead of 'input'
    // if you want older IE support
    i.addEventListener('input', function() {
      // Append hiddendiv to parent of textarea, so the size is correct
      // Remove this if you want the user to be able to resize it in modern browsers
      i.style.resize = 'none';
      // This removes scrollbars
      i.style.overflow = 'hidden';

      // Every input/change, grab the content
      content = i.value;

      // Add the same content to the hidden div
      // This is for old IE
      content = content.replace(/\n/g, '<br>');
      // The <br ..> part is for old IE
      hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';

      // Briefly make the hidden div block but invisible
      // This is in order to read the height
      hiddenDiv.style.visibility = 'hidden';
      hiddenDiv.style.display = 'block';
      i.style.height = hiddenDiv.offsetHeight + 'px';

      // Make the hidden div display:none again
      hiddenDiv.style.visibility = 'visible';
      hiddenDiv.style.display = 'none';

The key line for old IE is this one:

// fixes the IE innerHTML problem
content = content.replace(/\n/g, '<br>');
load more v

I want to make height of textarea equal to height of the text within it (And remove the scroll bar),$timeout queues an event that will fire after the DOM loads, which is what's necessary to get the right scrollHeight (otherwise you'll get undefined),I suggest counting the line breaks in the textarea text and setting the rows attribute of the textarea accordingly.,Creating a textarea with auto-resize


<textarea id="note">SOME TEXT</textarea>


textarea #note {
   width: 100 % ;
   direction: rtl;
   display: block;
   max - width: 100 % ;
   line - height: 1.5;
   padding: 15 px 15 px 30 px;
   border - radius: 3 px;
   border: 1 px solid #F7E98D;
   font: 13 px Tahoma,
   transition: box - shadow 0.5 s ease;
   box - shadow: 0 4 px 6 px rgba(0, 0, 0, 0.1);
   font - smoothing: subpixel - antialiased;
   background: linear - gradient(#F9EFAF, #F7E98D);
   background: -o - linear - gradient(#F9EFAF, #F7E98D);
   background: -ms - linear - gradient(#F9EFAF, #F7E98D);
   background: -moz - linear - gradient(#F9EFAF, #F7E98D);
   background: -webkit - linear - gradient(#F9EFAF, #F7E98D);
load more v

Create a textarea and the task is to automatically resize it when we type or paste the content in it. It can be achieved by using JavaScript and jQuery. ,The scrollHeight property is used to return the entire height of an element including padding in pixels. This will make the textarea height equal to the height of the whole text area, effectively resizing the textarea to fit the text.,How to make textarea 100% without overflow when padding is present ?,How to change selected value of a drop-down list using jQuery?


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

Here's a mobile examble targeting one single textfield of your needs.Also there's a maximum height of 500px inside the js (Action1) which you can adjust to your needs ;),How do I enable auto-resizing for a text area to fit content?,https://www.outsystems.com/forge/component/2133/text-area-auto-resizer/,I would like the number of lines for a text area to automatically increase as users type.

Or use a bit of js:

$('textarea').on('paste input', function() {
   if ($(this).outerHeight() > this.scrollHeight) {
   while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
      $(this).height($(this).height() + 1)
load more v

In many browsers, <textarea> elements are resizable by default. You may override this behavior with the resize property.,Block elements for which the overflow property is set to visible,The resize property is specified as a single keyword value from the list below.,Comparison with other layout methods

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: unset;
load more v

Other "textarea-height" queries related to "Textarea Auto height [duplicate]"