On two occasions I’ve encountered the same problem: how do you create a textarea that automatically expands along with your input. Here’s an implementation.

This was inspired by some bits and pieces on StackOverflow. The gist of it is that you place your textarea inside a wrapper div, set the textarea height to 100% so that it fills the parent, and then insert a div behind the textarea that maintains a copy of the textarea text. The browser will correctly size the hidden div, which will stretch the parent and stretch the textarea.

Here’s a jsFiddle:

A copy of the code is below:

HTML
1
2
3
4
<div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.textarea-container {
  width: 20%;
  position: relative;
}

textarea, .textarea-size {
  font-family: sans-serif; /* need to manually set font and font size */
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;

  overflow: hidden;
  width: 100%;
  height: 100%;
}

textarea {
  position: absolute;
  resize:none;
}

.textarea-size {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap:; break-word;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var textContainer, textareaSize, input;
var autoSize = function () {
  textareaSize.innerHTML = input.value + '\n' || 'a';
};

document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.textarea-container');
  textareaSize = textContainer.querySelector('.textarea-size')
  input = textContainer.querySelector('textarea');
  
  autoSize();
  input.addEventListener('input', autoSize);
});