Categories
HTML Jquery

How to expand the text-area using Jquery?

If you are looking for a code that automatically expands a textarea as the user types in, here is the simple code to create that using jQuery. This simple code will helps you in many projects.

How to expand the text-area using Jquery?
How to expand the text-area using Jquery?
Here is the example:
<!DOCTYPE html>
<html>
   <head>
      <title>How to expand the text-area using Jquery?</title>
      <script type="text/javascript">
         var autoExpand = function (field) {
         field.style.height = 'inherit';
         var computed = window.getComputedStyle(field);
         var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
         + parseInt(computed.getPropertyValue('padding-top'), 10)
         + field.scrollHeight
         + parseInt(computed.getPropertyValue('padding-bottom'), 10)
         + parseInt(computed.getPropertyValue('border-bottom-width'), 10);         
         field.style.height = height + 'px';
         };         
         document.addEventListener('input', function (event) {
         if (event.target.tagName.toLowerCase() !== 'textarea') return;
         autoExpand(event.target);
         }, false);
      </script>
   </head>
   <body>
      <textarea rows="5"></textarea>
   </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *