I set the width of a textarea to 100%, but now I need to know how many characters can fit in one row.

I'm trying to write a javascript function to auto-grow/shrink a textarea. I'm trying to keep from using jquery since I just need this one function.

My logic is to rows = textarea.value.split('\n'), iterate through rows and count += rows[i].length/textarea.cols, then count += rows.length, and finally textarea.rows = count. The only problem is that count is too large because textarea.cols is too small.

I set the width of a textarea to 100%, but now I need to know how many characters can fit in one row.

I'm trying to write a javascript function to auto-grow/shrink a textarea. I'm trying to keep from using jquery since I just need this one function.

My logic is to rows = textarea.value.split('\n'), iterate through rows and count += rows[i].length/textarea.cols, then count += rows.length, and finally textarea.rows = count. The only problem is that count is too large because textarea.cols is too small.

• javascript
• html
• textarea

• 4 This is a tough problem. For most fonts, it is impossible to predict a fixed number of allowed characters because each character has a different width. You will need to use a monospaced font like courier to do this – Pekka Commented Dec 28, 2010 at 17:50
• 1 Why use JavaScript? Can you use CSS? #textareaId { width:100%; } – brildum Commented Dec 28, 2010 at 17:55
• 1 @Pekka - always enjoying reading your answers/ments – ifaour Commented Dec 28, 2010 at 18:09
• 1 @ifaour thank you! It still is fun to write here, or even just think aloud in ments. – Pekka Commented Dec 28, 2010 at 22:55
• 1 Possible duplicate of Creating a textarea with auto-resize – DanMan Commented Nov 6, 2015 at 11:36

3 Answers 3

This function will set the height of the element (textarea, in your case) to the browser's default height. If that causes a scrollbar to appear, the height will be switched to the actually needed height.

function autoHeight(element){
    element.style.height='auto';
    element.style.height=element.scrollHeight+'px';
}

If you don't like the browser's default height, you can change that to some other default value of your own, of course.

Try this and enjoy:

var textarea = document.getElementById("YourTextArea");
var limit = 50; //height limit

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
};

textarea {
    width: 99%;
}

<textarea id="YourTextArea"></textarea>

It is remended to add a step to calculate the thickness, which can correctly handle the border width on the input box and avoid unexpected scrolling.

textarea.oninput = function () {
  textarea.style.height = 'auto'
  const thickness = textarea.offsetHeight - textarea.clientHeight
  textarea.style.height = `${textarea.scrollHeight + thickness}px`
}