{"id":3745,"date":"2019-01-09T06:28:37","date_gmt":"2019-01-09T06:28:37","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3745"},"modified":"2019-01-09T06:32:31","modified_gmt":"2019-01-09T06:32:31","slug":"auto-resize-textarea-height-using-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/","title":{"rendered":"Auto Resize Textarea Height using jQuery"},"content":{"rendered":"<p><b>Auto Resize<\/b> feature makes a textarea more user-friendly. It expands the height of textarea automatically based on the content. If your web form contains a textarea, you can add the auto resize feature to resize height automatically to fit the content. In this tutorial, we will show you how to <b>auto resize textarea<\/b> using jQuery.<\/p>\n<p>There are many third-party jQuery plugins are available to <a href=\"http:\/\/www.markupdrive.com\/automatically-resize-textarea-height-javascript-plugin\/\" target=\"_blank\">auto resize textarea height<\/a>. But if you want to build your own script for textarea auto height feature, you can easily make textarea height auto adjustable using jQuery without any third-party plugin.<\/p>\n<p>Our example code provides a simple way to add the auto-resize feature to textarea element using jQuery. When the content is inserted in the textarea, the height of the textarea field is expanded automatically based on the content. So, the textarea height will be fit to content and scrollbar not visible to the user.<\/p>\n<h2>Auto Resize Textarea<\/h2>\n<p>At first, include the jQuery library.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Code:<\/b><br \/>\nAdd the textarea element which you want to auto resize.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"content\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following code makes the textarea element auto adjustable using jQuery.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>On page load, a hidden clone DIV element is created and a class is added to textarea.<\/li>\n<li>When the user starts typing, the textarea content is placed to the clone DIV.<\/li>\n<li>The height of the clone DIV is applied to texrarea.<\/li>\n<li>You need to specify the element selector (<code>#content<\/code>) in the textArea variable.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\n$(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> textArea = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#content'<\/span>),\n    hiddenDiv = $(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.createElement(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'div'<\/span>)),\n    content = <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">null<\/span>;\n    \n    textArea.addClass(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'noscroll'<\/span>);\n    hiddenDiv.addClass(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'hiddendiv'<\/span>);\n    \n    $(textArea).after(hiddenDiv);\n    \n    textArea.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'keyup'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\n        content = $(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>).val();\n        content = content.replace(<span class=\"hljs-regexp\" style=\"color: rgb(215, 55, 55);\">\/\\n\/g<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;br&gt;'<\/span>);\n        hiddenDiv.html(content + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;br class=\"lbr\"&gt;'<\/span>);\n        $(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>).css(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'height'<\/span>, hiddenDiv.height());\n    });\n});\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>CSS Code:<\/b><br \/>\nThe CSS takes an important part to make clone DIV invisible and hide the scrollbar.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">style<\/span>&gt;<\/span>\n<span class=\"hljs-selector-tag\" style=\"color: olive;\">textarea<\/span>{\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">width<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">500px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">min-height<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">50px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">font-family<\/span>: Arial, sans-serif;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">font-size<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">13px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">color<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">#444<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">5px<\/span>;\n}\n<span class=\"hljs-selector-class\">.noscroll<\/span>{\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">overflow<\/span>: hidden;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">resize<\/span>: none;\n}\n<span class=\"hljs-selector-class\">.hiddendiv<\/span>{\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">display<\/span>: none;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">white-space<\/span>: pre-wrap;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">width<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">500px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">min-height<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">50px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">font-family<\/span>: Arial, sans-serif;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">font-size<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">13px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">padding<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">5px<\/span>;\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">word-wrap<\/span>: break-word;\n}\n<span class=\"hljs-selector-class\">.lbr<\/span> {\n  <span class=\"hljs-attribute\" style=\"color: maroon;\">line-height<\/span>: <span class=\"hljs-number\" style=\"color: navy;\">3px<\/span>;\n}\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">style<\/span>&gt;<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Auto Resize feature makes a textarea more user-friendly. It expands the height of textarea automatically based on the content. If your web form contains a textarea, you can add the auto resize feature to resize <\/p>\n","protected":false},"author":1,"featured_media":3747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[16,322],"class_list":["post-3745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-jquery","tag-textarea","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Auto Resize Textarea Height using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auto Resize Textarea Height using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-09T06:28:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-09T06:32:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Auto Resize Textarea Height using jQuery\",\"datePublished\":\"2019-01-09T06:28:37+00:00\",\"dateModified\":\"2019-01-09T06:32:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/\"},\"wordCount\":259,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/auto-resize-textarea-height-using-jquery-codexworld.png\",\"keywords\":[\"jQuery\",\"Textarea\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/\",\"name\":\"Auto Resize Textarea Height using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/auto-resize-textarea-height-using-jquery-codexworld.png\",\"datePublished\":\"2019-01-09T06:28:37+00:00\",\"dateModified\":\"2019-01-09T06:32:31+00:00\",\"description\":\"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/auto-resize-textarea-height-using-jquery-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/auto-resize-textarea-height-using-jquery-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"auto-resize-textarea-height-using-jquery-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/auto-resize-textarea-height-using-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auto Resize Textarea Height using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Auto Resize Textarea Height using jQuery - CodexWorld","description":"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Auto Resize Textarea Height using jQuery - CodexWorld","og_description":"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.","og_url":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-01-09T06:28:37+00:00","article_modified_time":"2019-01-09T06:32:31+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Auto Resize Textarea Height using jQuery","datePublished":"2019-01-09T06:28:37+00:00","dateModified":"2019-01-09T06:32:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/"},"wordCount":259,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","keywords":["jQuery","Textarea"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/","url":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/","name":"Auto Resize Textarea Height using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","datePublished":"2019-01-09T06:28:37+00:00","dateModified":"2019-01-09T06:32:31+00:00","description":"Auto resize textarea - Make textarea height auto adjustable to fit content using jQuery. Example code to auto-resize textarea height based on content using CSS and jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","width":1366,"height":768,"caption":"auto-resize-textarea-height-using-jquery-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/auto-resize-textarea-height-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Auto Resize Textarea Height using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/auto-resize-textarea-height-using-jquery-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Yp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3745"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3745\/revisions"}],"predecessor-version":[{"id":3746,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3745\/revisions\/3746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3747"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}