How to make an Expandable Text area:
How to make an Expandable Text area in HTML:
Hello Friends,
Today I am going to share a trick about a text area that has flexibility to suit any size.
This text area will be fixed initially, when text is filled the text height expands to a certain defined height the if further text is inserted then a scroll appears which helps in inclusion of more info. I am glad to share this with you so let start.
Put this code in body part in your html document.
<div
class="container">
<div class="row">
<div class="col-lg-12
InnerPart">
<form>
<div
class="form-group">
<div class="col-md-12">
<textarea class="form-control
animated" id="textarea"
name="textarea"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script
src='js/jquery.autosize.js'></script>
<script>
$(function(){
$('.normal').autosize();
$('.animated').autosize();
});
</script>
First View:
This is the first view of text
area. If user have few words to write then the text area will not expand or have any scroll. Like as first picture:-
Second View:
This is the second view of text
area where text area takes its maximum height. Refer this picture:-
Third View:
This is the last view of text
area. Here it has expanded at its maximum height, after it a scroll will appear to cater the increase in number of text. This can be seen in the following picture:-
View live Demo at:-
For any further query please get in touch at info@bel-technology.com
!------------------------------------------------------HunterTech------------------------------------------------------------!
Team
0 comments