{"id":68,"date":"2010-04-04T01:42:38","date_gmt":"2010-04-04T06:42:38","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=68"},"modified":"2010-04-04T01:43:45","modified_gmt":"2010-04-04T06:43:45","slug":"textarea-auto-re-size-function","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2010\/04\/04\/textarea-auto-re-size-function\/","title":{"rendered":"Textarea auto re-size function&#8230;."},"content":{"rendered":"<p>So I had to create an auto re-size function for textareas.  I looked around on the net and found a few things, but nothing really did what i wanted&#8230;. so I wrote this quick and dirty function to determine the pixel height a textarea should be based on the number of new lines and length of the content in that textarea.  You pass the function the id of the textarea and it returns a number which you should resize the textarea&#8217;s pixel height to.  The function uses prototype element functions, but these could easily be ported to another framework or replaced with crossbrowser javascript code.  I&#8217;m just too lazy&#8230;..you get the idea =)<\/p>\n<pre lang=\"javascrpt\">\r\n\r\nsizeTextarea = function(textarea){ \r\n\ttextarea = $(textarea);\r\n\tvar hard_lines = 0;\r\n\tvar soft_lines = 0;\r\n\tvar lines = 0;\r\n\tvar str = textarea.value;\r\n\tvar w = textarea.getWidth();\r\n\tvar fs = parseInt(textarea.getStyle('font-size').replace('px',''));\r\n\tvar lh = parseInt(textarea.getStyle('line-height').replace('px',''));\r\n\tvar tmp_char_cnt = 0;\r\n\tvar tmp_s = '';\r\n\tvar sarr = str.split(\"\\n\");\r\n\thard_lines = sarr.length;\r\n\tif(sarr.length>0){\r\n\t\tfor(i=0;i<sarr.length;i++) {\r\n\t\t\ttmp_s = sarr[i].split('');\r\n\t\t\ttmp_char_cnt = (tmp_s.length*6)\/w;\r\n\t\t\tif(tmp_char_cnt > 1){\r\n\t\t\t\tsoft_lines += tmp_char_cnt;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t\r\n\tlines = hard_lines+soft_lines+1;\r\n\treturn (lines*lh); \r\n}\r\n\r\n<\/pre>\n<p>You may need to change this line:<\/p>\n<blockquote><p>tmp_char_cnt = (tmp_s.length*6)\/w;<\/p><\/blockquote>\n<p>as I found the number 6 just seemed to work for me with the font size in my textarea&#8230;..good luck!  I hope someone finds this useful&#8230;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So I had to create an auto re-size function for textareas. I looked around on the net and found a few things, but nothing really did what i wanted&#8230;. so I wrote this quick and dirty function to determine the pixel height a textarea should be based on the number of new lines and length [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[61,19],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/68"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":2,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}