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;
}
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.