Directly on code:
programme One:
<! 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> Maple Blog» text box textarea height adaptive growth/expansion </TITLE> <style> textarea {height:100px; width : 300px; } </style> </HEAD> <BODY> <!--onpropertychange:ie Support in the following code; Oninput:firefox support; for compatibility with IE and FF, So plus this two;--> <textarea id= "Txtcontent" rows= "1" onpropertychange= "Resizetextarea ()" Oninput= "ResizeTextarea ( ) "onkeyup=" Resizetextarea () "> http://jb51.net</textarea> <script type=" Text/javascript ">//min height var minheight = 100; Maximum height, over then appears scroll bar var maxheight = 300; function Resizetextarea () {var t = document.getElementById (' txtcontent '); h = t.scrollheight; H = h > minheight? H:minheight; H = h > maxheight? MaxheighT:h; T.style.height = h + "px"; } </script> </BODY> </HTML>
scheme one in each browser, the text box is not a problem with the adaptive growth of the content, but when the content is deleted, the performance is different, IE, opera is normal, Firefox, Chrome, Safari will not shrink. The reason is that the scrollheight value equals the height of the text box, rather than the height of the text box, when the text box content is less than the height of the text box.
Programme II:
Copy Code code as follows:
<! 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> Maple Yun» text box textarea height adaptive growth/Scaling </TITLE>
</HEAD>
<BODY> Br><textarea id= "Txtcontent" rows= "5" cols= "onkeyup=" (Resizetextarea) "style=" Overflow-y:hidden; >textarea height with content adaptively grow, no scroll bar
Clear Maple production
http://jb51.net</textarea>
<script type= "Text/javascript" & Gt
//min height
var minrows = 5;
//maximum height, more than the scroll bar appears
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>
The
Scheme II behaves the same in each browser, allowing the text box to grow and shrink with the content itself. But one drawback is that when the text box is growing high, the text box will show a beat.
other two options for selecting Cut, paste, and delete commands to manipulate text content through the right-click menu of the text box are not valid. It can be said that the perfect solution has not been found, and will be left to study later. Which student if has the perfect plan, please enlighten!
Other programmes:
- A different approach to elastic Textareas Scheme II is to be implemented after reference to this article
- Build a elastic Textarea with Ext JS
- Smart textarea:scrollheight in IE, Firefox, Opera and Safari
Original link: http://witmax.cn/javascript-textarea-auto-grow.html
