Home > Developer > JavaScript
First, let's look at the html code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript" src = "Scripts/jquery-1.8.0.min.js"> </script>
<Script type = "text/javascript" src = "Scripts/jquery. autogrow. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Autogrow'). autogrow ();
});
</Script>
</Head>
<Body>
<Form action = "#" method = "post">
<Fieldset>
<Legend> auto growing textarea </legend>
<Textarea id = "autogrow" cols = "20" rows = "4"> this textarea will grow indefinitely. </textarea>
</Fieldset>
</Form>
</Body>
</Html>
The following is the js plug-in code:
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. autogrow = function (options ){
Var defaults = {
MinHeight: 0,
MaxHeight: 9999
};
Var options = $. extend (defaults, options );
Return this. each (function (){
Var element = $ (this );
// The content length and width of the last text box
Var lastValLength, lastWidth;
// Text box content length, width, and height
Var valLength, width, height;
// Verify that the page element is textarea
If (! Element. is ('textarea ')){
Return;
}
Element.css ('overflow', 'hided') // you can specify a text hidden out of range.
. Keyup (function () {// set the keyboard bounce event
// Get the content length of the text box
ValLength = $ (this). val (). length;
// Obtain the width of the input box
// The jquery version I used here is 1.8. The method for getting css attributes has become prop.
// If jquery of versions earlier than 1.6 is used, the following code changes to width =$ (this). attr ('offsetwidth ');
// $ (This). prop ('scrollheight') must also be changed to: $ (this). attr ('scrollheight ')
Width = $ (this). prop ('offsetwidth ');
// When there is a text deletion operation or the text box width changes, set the text box height to 0 first.
If (valLength <lastValLength | width! = LastWidth ){
$ (This). height (0 );
}
// Calculate the appropriate text box height
Height = Math. max (options. minHeight, Math. min ($ (this). prop ('rollheight'), options. maxHeight ));
// Hide unnecessary text if the height of the current text box exceeds the maximum allowed height; otherwise, set it to auto
// $ (This). prop ('rollheight')> height is meaningful only when the obtained value in height is options. maxHeight.
Watermark (this).css ('overflow', ($ (this). prop ('scrollheight')> height? 'Auto': 'den den '))
. Height (height); // you can specify the height of a text box.
LastValLength = valLength;
LastWidth = width;
});
});
}
}) (JQuery );
The example is relatively simple, that is, when you enter information in the text box, the height of the text box will automatically increase according to the situation.
It is recommended that you write the code by yourself on the basis of understanding the code to deepen your memory, and may encounter some special circumstances, or your demo may fail to run. By making your demo run successfully, your js capability will be improved.
Demo: jQuery. plugin. autogrow
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
