Home > Developer > Web Develop
Text input box adaptive height, text input box adaptive
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<TITLE> text box textarea highly adaptive growth/scaling </TITLE>
</HEAD>
<BODY>
<Textarea id = "txtContent1" rows = "5" cols = "50" onkeyup = "ResizeTextarea (1)" style = "overflow-y: hidden; resize: none; "> the Textarea height increases with the Content Self-adaptive and has no scroll bar.
</Textarea>
<Script type = "text/javascript">
// Minimum height
Var minRows = 5;
// Maximum height. The scroll bar appears when the value exceeds
Var maxRows = 60;
Function ResizeTextarea (index ){
Var t = document. getElementById ('txtcontent' + index );
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>
Before auto increment:
After auto-increment:
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
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
