Make Textarea Height Fit Its Content - jQuery autoSized
| File Size: | 3.2 KB |
|---|---|
| Views Total: | 2235 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A dead simple yet fully configurable jQuery textarea resize plugin which makes the textarea element to grow vertically with its content while typing.
How to use it:
1. Import jQuery JavaScript library and the jQuery autoSized plugin into the HTML document.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">
</script>
<script src="autoSizedJS/autoSized.js"></script>
2. Call the function on the existing textarea element and specify the width & min-height:
<textarea name="contact" placeholder="Type Something Here"></textarea>
$(function(){
$("textarea").autosized({
width: "100%",
minHeight: 100
});
});
3. Customize the text color & background color of the textarea element.
$(function(){
$("textarea").autosized({
width: "100%",
minHeight: 100,
backgroundColor: "#222",
color: "#fff"
});
});
4. Set the CSS resize & overflow properties of the textarea element.
$(function(){
$("textarea").autosized({
width: "100%",
minHeight: 100,
resize: "none",
overflow: ""
});
});
This awesome jQuery plugin is developed by jsfanatik. For more Advanced Usages, please check the demo page or visit the official website.











