How to increase height of textarea based font size

Question

I have a textarea,where user will input some text,and also have a input range,where user can increase the font size of text,I want that the width of textarea still same,but height increase depend font size to show all text,and also I want textarea don't have a scroll and resize I did that using div,and I want the same result using textarea

I did that using div https://jsfiddle.net/Meline222/fgpedL0z/1/

I want the same result but using textarea https://jsfiddle.net/Meline222/fgpedL0z/3/ bt when i use textarea all text can't see

I tried did but all text don't show textarea

this work for div

 #inputText {
            width: 150px;
    height: auto;
    border: 1px solid;
    word-wrap: break-word;
    overflow:hidden;
    resize: none;
    }

Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — dmoore1181, Mar 28 '19 at 20:00
Isn’t div increasing its height along with the text inside? — Davide Vitali, Mar 28 '19 at 20:01
i have this https://jsfiddle.net/Meline222/fgpedL0z/1/ and i want the same result using textarea — Programmer, Mar 28 '19 at 20:06
but when I use textarea https://jsfiddle.net/Meline222/fgpedL0z/3/ result not the same,I want increase height textarea to show all text — Programmer, Mar 28 '19 at 20:07

score 1 · Answer 1 · answered Mar 28 '19 at 20:13

1

If you want only the height to be adjusted along font size, use em unit measure.

width: 150px;
height: 2em;

Documentation about the em unit says

em: 1em is the same as the font-size of the current element.

answered Mar 28 '19 at 20:13

Davide Vitali

1,017
8
24

Craig Wayne · Accepted Answer · 2019-03-28T21:23:30.140

JSFiddle Demo: https://jsfiddle.net/craigiswayne/qkn8rdxp/20/

function adjustSize(i){
    var o = document.getElementById('inputText');
    o.setAttribute("style","height: auto;");
    var val = i.value;
    o.style.fontSize = val + 'px';
    var fontSize = o.style.fontSize;
    o.setAttribute("style","font-size: " + fontSize + "; height: " + o.scrollHeight + "px;");  
}

#inputText {
  width: 150px;
  height: auto;
  border: 1px solid;
  word-wrap: break-word;
}

<textarea name="" id="inputText">kyb  u uuhhhkjh kj</textarea>
 <input id="input" type="range" min="12" max="72" oninput="adjustSize(this);">

So the solution I chose to set the height of the textarea to it's scrollHeight

scrollHeight is defined by MDN docs as

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

see also this post for an explanation of scrollHeight, clientHeight and offsetHeight

What is offsetHeight, clientHeight, scrollHeight?

Can you say please why it doesn't work for the second textarea? https://jsfiddle.net/vpk81yr0/1/ when I click to choose font-size it doesn't work the same way,as a first textarea — Programmer, Mar 30 '19 at 16:10

How to increase height of textarea based font size

2 Answers2