I like the autogrow textarea I did back here. But with a mulit-user installation like http://BiographyJournal.com it would be tiring adding it to every comment field. Even a remote script would still nee to be pulled in and the exact form name used, or it might miss one. So I found a way to apply the behavior to every textarea on every page with just one script. Here’s the script.

<script>
  for(var f=0;f<document.forms.length;f++)
    {
    var elem = document.forms[f].elements;
    for(var i = 0; i < elem.length; i++)
      {
      if(elem[i].type=='textarea')
        {
        elem[i].style.height='28px';
        elem[i].style.overflow='hidden';
        elem[i].onkeyup=function(){myOnKeyUp(this);};
        }
      }
    }

  function myOnKeyUp(el)
    {
    if((navigator.userAgent.indexOf('MSIE')>-1) |
        (navigator.userAgent.indexOf('Opera')>-1))
      {
      el.style.height=(el.scrollHeight+14)+'px';
      }
    else
      {
      if(navigator.userAgent.indexOf('Firefox')>-1)
        {
        el.style.height=(el.scrollHeight)+'px';
        el.style.paddingBottom='0px';
        }
      else  // Safari and Chrome
        {
        el.style.height=(el.scrollHeight-8)+'px';
        }
      }
    if(el.scrollHeight<28){el.style.height='28px';}
    }
</script>

The first bit searches through every form on the page and then every element in the for to find textareas. It then applies the function to thet field.

Comments are closed.