Saturday, 7 May 2016

How to Auto Resize a textarea html field by jQuery

           ,      2 comments   


This one more post on Web Development using JQuery, in this post we will discuss on auto resize of a html textarea field by using jquery. When user start type in html textarea element then it will automatically increase it's height very smoothly and when user will leave from textarea field it will automatically reduce the height smoothly and comes to it's orignal height. This all things are done by using jquery. By using jquery we can change the height of this fields. If you have use facebook and in facebook you have try type in textarea it was automatically change the height. If you want to give somethings new to your user then you can add this type of features in your web application. If you want to learn in details, you can see the video of this post.

Source Code


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | How to Auto Resize a textarea with jQuery</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <style>  
           .wrapper{  
                width:500px;  
                margin:0 auto;  
           }  
           .resize{  
                height:40px;  
                padding:4px;  
                font-size:14px;  
                border:1px solid #dddddd;  
                width:100%;  
                border-radius:5px;  
           }  
           </style>  
           <script>  
           $(document).ready(function(){  
                $('.resize').focus(function(){  
                     $(this).animate({"height":"100px",}, "fast");  
                });  
                $('.resize').blur(function(){  
                     $(this).animate({"height": "40px",}, "fast" );  
                });  
           });  
           </script>  
      </head>  
      <body>  
           <div class="wrapper" align="center">  
                <br />  
                <h3>How to Auto Resize a textarea with jQuery</h3><br />  
                <textarea name="resize" class="resize"></textarea>  
                <br />  
           </div>  
      </body>  
 </html>

2 comments: