Let's look at the Code directly. It's very simple and practical.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> autoresizing textarea </title>
<Style type = "text/css">
Textarea {
Border: 0 none white;
Overflow: hidden;
Padding: 0;
Outline: none;
Background-color: # D0D0D0;
Resize: none;
}
</Style>
<Script type = "text/javascript">
Var observe;
If (window. attachEvent ){
Observe = function (element, event, handler ){
Element. attachEvent ('on' + event, handler );
};
}
Else {
Observe = function (element, event, handler ){
Element. addEventListener (event, handler, false );
};
}
Function init (){
Var text = document. getElementById ('text ');
Function resize (){
Text. style. height = 'auto ';
Text. style. height = text. scrollHeight + 'px ';
}
/* 0-timeout to get the already changed text */
Function delayedResize (){
Window. setTimeout (resize, 0 );
}
Observe (text, 'change', resize );
Observe (text, 'Cut ', delayedResize );
Observe (text, 'paste ', delayedResize );
Observe (text, 'drop', delayedResize );
Observe (text, 'keylow', delayedResize );
Text. focus ();
Text. select ();
Resize ();
}
</Script>
</Head>
<Body onload = "init ();">
<Textarea cols = "40" rows = "1" style = "height: 25px;" id = "text"> </textarea>
</Body>
</Html>