如何增加基于文本区域的字体大小的高度

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

Answer 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.

Answer 2

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?