{"id":126,"date":"2011-03-21T12:28:02","date_gmt":"2011-03-21T12:28:02","guid":{"rendered":"http:\/\/blog.invoiceberry.com\/?p=126"},"modified":"2016-08-09T08:33:59","modified_gmt":"2016-08-09T06:33:59","slug":"dynamically-change-the-height-of-a-textarea-based-on-the-text-javascript","status":"publish","type":"post","link":"https:\/\/www.invoiceberry.com\/blog\/dynamically-change-the-height-of-a-textarea-based-on-the-text-javascript\/","title":{"rendered":"Dynamically change the height of a textarea based on the text (Javascript)"},"content":{"rendered":"

As mentioned in this post<\/a>, we will publish some solutions and code snippets of problems we’ve encountered and solved.<\/p>\n

The Problem<\/h2>\n

On our invoices<\/a>, quotes, expenses and items<\/a> pages we need to have descriptions. Rather then having a text box with 5 or 10 rows as standard we decided that we want to only show one row as standard and then dynamically add more rows whenever needed.<\/p>\n

Our Solution<\/h2>\n

This means we are only going to change the number of rows (height) whenever someone either hits the ENTER button (line break) or when the text is a certain length and an automatic line break should occur.<\/p>\n

We first need the HTML:<\/strong><\/p>\n

<textarea id=\"description_id\" onkeyup=\"new do_resize(this);\" cols=\"20\" rows=\"1\" name=\"description_name\"><\/textarea><\/pre>\n
 <\/p>\n
This just creates a textarea with one row. We also tell it to execute the JavaScript function “do_resize” every time we hit a key (onkeyup).<\/p>\n
Then we need the\u00a0JavaScript:<\/strong><\/p>\n
function do_resize(textbox) {\r\n\r\n var maxrows=5; \r\n  var txt=textbox.value;\r\n  var cols=textbox.cols;\r\n\r\n var arraytxt=txt.split('\\n');\r\n  var rows=arraytxt.length; \r\n\r\n for (i=0;i<arraytxt.length;i++) \r\n  rows+=parseInt(arraytxt[i].length\/cols);\r\n\r\n if (rows>maxrows) textbox.rows=maxrows;\r\n  else textbox.rows=rows;\r\n }<\/pre>\n
 <\/p>\n
The JavaScript function takes the value of the textarea and splits it into arrays whenever a line break (“\\n”) occurs. The length of the array then gives us the amount of rows we need.<\/p>\n
However, we also have to check the length of every string in the array, as we need to add a new row for strings which are longer than 20 characters (remember we set our cols variable to 20).<\/p>\n
We hope this little code helps some people out there.
\nPlease do not hesitate to leave a comment for feedback, asking for clarification or errors.<\/p>\n","protected":false},"excerpt":{"rendered":"
As mentioned in this post, we will publish some solutions and code snippets of problems we’ve encountered and solved. The Problem On our invoices, quotes, expenses and items pages we need to have descriptions. Rather then having a text box with 5 or 10 rows as standard we decided that we want to only show […]<\/p>\n","protected":false},"author":3,"featured_media":4574,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":"","jetpack_publicize_message":""},"categories":[27],"tags":[32,30,29,31],"jetpack_featured_media_url":"https:\/\/i1.wp.com\/www.invoiceberry.com\/blog\/wp-content\/uploads\/2011\/03\/dynamically_change_textarea_box_with_pure_javascript-1.png?fit=1380%2C580&ssl=1","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5m6q6-22","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/posts\/126"}],"collection":[{"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":55,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/posts\/126\/revisions"}],"predecessor-version":[{"id":4576,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/posts\/126\/revisions\/4576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/media\/4574"}],"wp:attachment":[{"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/media?parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/categories?post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.invoiceberry.com\/blog\/wp-json\/wp\/v2\/tags?post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}