{"id":641,"date":"2024-08-08T21:30:00","date_gmt":"2024-08-08T19:30:00","guid":{"rendered":"https:\/\/blog.pirulug.com\/?p=641"},"modified":"2024-08-08T21:30:00","modified_gmt":"2024-08-08T19:30:00","slug":"como-hacer-que-los-elementos-textarea-crezcan-automaticamente-segun-su-contenido","status":"publish","type":"post","link":"https:\/\/blog.pirulug.com\/?p=641","title":{"rendered":"C\u00f3mo hacer que los elementos &lt;textarea&gt; crezcan autom\u00e1ticamente seg\u00fan su contenido"},"content":{"rendered":"<p>\n  En este art\u00edculo, aprender\u00e1s c\u00f3mo hacer que los elementos<br \/>\n  <code>&lt;textarea&gt;<\/code> de tu formulario crezcan autom\u00e1ticamente seg\u00fan<br \/>\n  su contenido utilizando HTML, CSS y JavaScript.\n<\/p>\n<h3>HTML<\/h3>\n<pre class=\"language-html\"><code>&lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt;\n&lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt;\n&lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt;\n<\/code><\/pre>\n<h3>CSS<\/h3>\n<pre class=\"language-css\"><code>textarea {\n  overflow: hidden;\n  resize: none;\n}\n<\/code><\/pre>\n<h3>JavaScript<\/h3>\n<pre class=\"language-js\"><code>function autoResize() {\n  const textareas = document.getElementsByClassName(&quot;auto-resize&quot;);\n  for (let i = 0; i &lt; textareas.length; i++) {\n    const textarea = textareas[i];\n    textarea.style.height = &quot;auto&quot;; \/\/ Restablece la altura para obtener el scrollHeight correcto\n    textarea.style.height = textarea.scrollHeight + &quot;px&quot;; \/\/ Ajusta la altura al contenido\n  }\n}\n\n\/\/ Agregar el evento &#039;input&#039; a todos los elementos textarea con la clase &quot;auto-resize&quot;\nconst allTextareas = document.getElementsByClassName(&quot;auto-resize&quot;);\nfor (let i = 0; i &lt; allTextareas.length; i++) {\n  allTextareas[i].addEventListener(&quot;input&quot;, autoResize);\n}\n<\/code><\/pre>\n<p>\n  Con esta implementaci\u00f3n, todos los <code>&lt;textarea&gt;<\/code> con la clase<br \/>\n  <code>&quot;auto-resize&quot;<\/code> crecer\u00e1n autom\u00e1ticamente seg\u00fan su contenido en el<br \/>\n  formulario.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo, aprender\u00e1s c\u00f3mo hacer que los elementos &lt;textarea&gt; de tu formulario crezcan autom\u00e1ticamente seg\u00fan su contenido utilizando HTML, CSS y JavaScript. HTML &lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt; &lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt; &lt;textarea class=&quot;auto-resize&quot;&gt;&lt;\/textarea&gt; CSS textarea { overflow: hidden; resize: none; } JavaScript function autoResize() { const textareas = document.getElementsByClassName(&quot;auto-resize&quot;); for (let i = 0; i &lt; textareas.length; i++) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[47,67],"class_list":["post-641","post","type-post","status-publish","format-standard","hentry","category-sin-categoria","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=641"}],"version-history":[{"count":0,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/641\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}