Home > Developer > JavaScript
Directly run the Code:
Solution 1:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <HTML> <HEAD> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <TITLE> fengzhi» text box textarea highly adaptive growth/scaling </TITLE> <style> textarea {height: 100px; width: 300px ;} </style> </HEAD> <BODY> <pre class = "code" id = "txtContent" rows = "1" onpropertychange = "ResizeTextarea () "oninput =" ResizeTextarea () "onkeyup =" ResizeTextarea () "> Qingfeng production http://jb51.net </textarea> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Solution 1 in various browsers, the text box is no problem with the adaptive growth of content; however, the contraction of the deleted content is different, and IE and Opera are normal, firefox, Chrome, and Safari will not contract. The reason is that the scrollHeight value is equal to the text box height when the text box content height is smaller than the text box height, rather than the text box content height.
Solution 2:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<HTML>
<HEAD>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<TITLE> fengyunzhi> text box textarea height adaptive growth/scaling </TITLE>
</HEAD>
<BODY>
<Textarea id = "txtContent" rows = "5" cols = "50" onkeyup = "ResizeTextarea ()" style = "overflow-y: hidden; "> the Textarea height increases with the Content Self-adaptive and has no scroll bar.
Qingfeng Production
Http://jb51.net </textarea>
<Script type = "text/javascript">
// Minimum height
Var minRows = 5;
// Maximum height. The scroll bar appears when the value exceeds
Var maxRows = 12;
Function ResizeTextarea (){
Var t = document. getElementById ('txtcontent ');
If (t. scrollTop = 0) t. scrollTop = 1;
While (t. scrollTop = 0 ){
If (t. rows> minRows)
T. rows --;
Else
Break;
T. scrollTop = 1;
If (t. rows <maxRows)
T. style. overflowY = "hidden ";
If (t. scrollTop> 0 ){
T. rows ++;
Break;
}
}
While (t. scrollTop> 0 ){
If (t. rows <maxRows ){
T. rows ++;
If (t. scrollTop = 0) t. scrollTop = 1;
}
Else {
T. style. overflowY = "auto ";
Break;
}
}
}
</Script>
</BODY>
</HTML>
Solution 2 performs the same in different browsers, so that the text box can grow and contract with the content. However, when the height of the text box increases, the text box shows a beating.
In addition, the preceding two schemes do not work when you right-click the text box and choose commands such as cut, paste, and delete to operate the text content. It can be said that no perfect solution has been found for the moment, and we will study it later. If anyone has a perfect solution, please kindly advise!
Other solutions:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
